Visualization
Komponen ini mengambil data dan konfigurasi dari konteks kueri serta merender visualisasi yang sesuai. Anda dapat menyesuaikan lebar dan tinggi dengan meneruskan nilai piksel numerik ke properti tersebut.
Properti | Nilai | Catatan |
---|---|---|
width
|
angka (dalam piksel) | Default 100% jika properti tidak ditentukan. |
height
|
angka (dalam piksel) | Default 500 piksel jika properti tidak ditentukan. |
chartTypeMap
|
objek kunci/nilai | Menerima objek nilai/kunci yang menentukan komponen yang akan dirender saat sistem adaptor menemukan nilai jenis diagram tertentu. Tindakan ini dapat digunakan untuk mengganti diagram default Looker atau menambahkan jenis diagram baru ke sistem adaptor. |
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'
<Query query='12345' config={{ type: 'radar'}}>
<Visualization
width={1000}
height={500}
chartTypeMap={{ radar: MyCustomRadar}}
/>
</Query>
Query
Query
terintegrasi dengan JavaScript API kami untuk menangani siklus permintaan/respons dan untuk mengambil respons kueri berdasarkan ID kueri atau nilai qid
. Anda dapat meneruskan penggantian konfigurasi vis untuk digabungkan dengan respons API, dan memuat semua data ke dalam konteks React.
Properti | Nilai | Catatan |
---|---|---|
query
|
angka | {i>string<i} | Dapat menerima Query.client_id , yang muncul setelah properti qid di URL Jelajah, (3fdrdE0b3ATltUvXBaSOPN ), atau ID kueri numerik (1234 ). Jika Anda memiliki akses ke ID kueri numerik, satu permintaan server tambahan dapat disimpan berdasarkan nilai ini.Query menerima properti query atau properti dashboard , tetapi tidak keduanya.
|
dashboard
|
angka | Dapat menerima ID dasbor numerik (1234 ). Jika Anda memiliki akses ke ID dasbor numerik, mulai dari nilai ini dapat menyimpan satu permintaan server tambahan.dashboard tidak menerima ID string dasbor LookML.Query menerima properti query atau properti dashboard , tetapi tidak keduanya.
|
config
|
Bergantung pada nilai type , menerima properti berikut:type , legend , positioning , render_null_values , tooltips , series , x_axis , y_axis Lihat dokumentasi khusus diagram nanti di halaman ini untuk mengetahui nilai yang didukung.
|
Menetapkan dan mengganti setelan konfigurasi untuk diagram. |
LoadingIndicator
|
referensi komponen | Menerima referensi komponen yang dilepas. Default: ProgressCircular
|
import { Visualization, Query } from '@looker/visualizations'
import { ProgressCircular } from '@looker/components'
<Query
query='12345'
config={{
/* specific properties described later on this page */
}}
LoadingIndicator={ProgressCircular}
>
<Visualization />
</Query>
Properti diagram area
Berikut adalah properti config
untuk diagram area.
Properti | Nilai | Catatan |
---|---|---|
type
|
'area'
|
|
legend
|
false (untuk menonaktifkan) ATAU { position: 'left' | 'bottom' | 'right' | 'top' }
|
Menetapkan posisi legenda atau menonaktifkan legenda dengan menyetelnya ke false .Default: { position: 'bottom' }
|
positioning
|
'overlay' | 'stacked' | 'percent'
|
Mode penumpukan diagram. Default: 'overlay'
|
render_null_values
|
boolean | Memperlakukan nilai null sebagai 0. Default: false
|
tooltips
|
boolean | Aktifkan atau nonaktifkan tooltip yang muncul saat mengarahkan kursor ke titik data. Default: true
|
series
|
serial dalam format view_name.field_name
|
Lihat bagian serial untuk opsi konfigurasi dan contoh penggunaan. |
x_axis
|
konfigurasi sumbu x | Lihat bagian sumbu x untuk opsi konfigurasi dan contoh penggunaan. |
y_axis
|
konfigurasi sumbu y | Lihat bagian sumbu y untuk opsi konfigurasi dan contoh penggunaan. |
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'area',
legend: { position: 'left' },
positioning: 'stacked',
render_null_values: true,
tooltips: true,
}}
>
<Visualization />
</Query>
series
Properti series
dapat menerima array konfigurasi deret atau objek bernama yang menggantikan deret tertentu dalam respons Anda.
Properti | Nilai | Catatan |
---|---|---|
color
|
string | Kode heksadesimal |
label
|
string | |
line_width
|
angka | Setel lebar goresan garis dalam piksel. Default: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Tetapkan bentuk titik. Default: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Tetapkan gaya titik. Default: 'none' (poin dinonaktifkan)
|
visible
|
boolean | Menampilkan atau menyembunyikan deret data. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'area',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
}
}
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'area',
series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
}}
>
<Visualization />
</Query>
x_axis
Meskipun diagram kami saat ini hanya mendukung sumbu x tunggal, API kami sudah siap menghadapi masa depan dan terstruktur untuk mendukung konfigurasi beberapa sumbu.
Properti | Nilai | Catatan |
---|---|---|
gridlines
|
boolean | Menampilkan atau menyembunyikan garis petak vertikal. Default: false
|
label
|
false (untuk menyembunyikan label) | string (nilai untuk dirender)
|
Menetapkan nilai yang akan dirender sebagai label sumbu x. Default: false (tanpa label)
|
reversed
|
boolean | Membalik urutan titik data. Default: false
|
values
|
boolean | Menampilkan atau menyembunyikan nilai yang dirender di sepanjang sumbu. Default: true |
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'area',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Meskipun diagram kami saat ini hanya mendukung satu sumbu y, API kami sudah siap menghadapi masa depan dan terstruktur untuk mendukung konfigurasi beberapa sumbu.
Properti | Nilai | Catatan |
---|---|---|
gridlines
|
boolean | Menampilkan atau menyembunyikan garis petak vertikal. Default: false .
|
label
|
false (untuk menyembunyikan label) | string (nilai untuk dirender)
|
Menetapkan nilai yang akan dirender sebagai label sumbu y. Default: false (tanpa label)
|
range
|
[angka (minimum) | 'auto' , angka (maks) | 'auto' |
Menetapkan nilai minimum dan maksimum dari sumbu y. Menyetel minimum ke 'auto' akan ditetapkan secara default ke 0, dan menetapkan nilai maksimum ke 'auto' akan ditetapkan secara default ke nilai titik data maksimum dalam kumpulan. Default: ['auto' | 'auto']
|
values
|
boolean | Menampilkan atau menyembunyikan nilai yang dirender di sepanjang sumbu. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'area',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [50, 'auto'] },
],
}}
>
<Visualization />
</Query>
Properti diagram batang dan kolom
Berikut adalah properti config
untuk diagram batang dan kolom.
Properti | Nilai | Catatan |
---|---|---|
type
|
'bar' | 'column'
|
|
legend
|
false (untuk menonaktifkan) ATAU { position: 'left' | 'bottom' | 'right' | 'top' }
|
Menetapkan posisi legenda atau menonaktifkan legenda dengan menyetelnya ke false . Default: { position: 'bottom' }
|
positioning
|
'grouped' | 'stacked' | 'percent'
|
Mode penumpukan diagram. Default: 'overlay'
|
tooltips
|
boolean | Aktifkan atau nonaktifkan tooltip yang muncul saat mengarahkan kursor ke titik data.Default: true
|
series
|
serial dalam format view_name.field_name
|
Lihat bagian serial untuk opsi konfigurasi dan contoh penggunaan. |
x_axis
|
konfigurasi sumbu x | Lihat bagian sumbu x untuk opsi konfigurasi dan contoh penggunaan. |
y_axis
|
konfigurasi sumbu y | Lihat bagian sumbu y untuk opsi konfigurasi dan contoh penggunaan. |
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'bar',
legend: { position: 'left' },
positioning: 'stacked',
tooltips: true,
}}
>
<Visualization />
</Query>
series
Properti series
dapat menerima array konfigurasi deret atau objek bernama yang menggantikan deret tertentu dalam respons Anda.
Properti | Nilai | Catatan |
---|---|---|
color
|
string | Kode heksadesimal |
label
|
string | |
visible
|
boolean | Menampilkan atau menyembunyikan deret data. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'column',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
visible: false,
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'column',
series: [{ color: '#4285F4', label: 'Total Orders', visible: false }],
}}
>
<Visualization />
</Query>
x_axis
Meskipun diagram kami saat ini hanya mendukung sumbu x tunggal, API kami sudah siap menghadapi masa depan dan terstruktur untuk mendukung konfigurasi beberapa sumbu.
Properti | Nilai | Catatan |
---|---|---|
gridlines
|
boolean | Menampilkan atau menyembunyikan garis petak vertikal. Default: false .
|
label
|
false (untuk menyembunyikan label) | string (nilai untuk dirender)
|
Menetapkan nilai yang akan dirender sebagai label sumbu x. Default: false (tanpa label)
|
reversed
|
boolean | Membalik urutan titik data. Default: false
|
values
|
boolean | Menampilkan atau menyembunyikan nilai yang dirender di sepanjang sumbu. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'column',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Meskipun diagram kami saat ini hanya mendukung satu sumbu y, API kami sudah siap menghadapi masa depan dan terstruktur untuk mendukung konfigurasi beberapa sumbu.
Properti | Nilai | Catatan |
---|---|---|
gridlines
|
boolean | Menampilkan atau menyembunyikan garis petak vertikal. Default: false .
|
label
|
false (untuk menyembunyikan label) | string (nilai untuk dirender)
|
Menetapkan nilai yang akan dirender sebagai label sumbu y. Default: false (tanpa label)
|
range
|
[angka (minimum) | 'auto' , angka (maks) | 'auto' |
Menetapkan nilai minimum dan maksimum dari sumbu y. Menyetel mnt ke 'otomatis' nilai default-nya adalah 0, dan menyetel nilai maksimum ke 'otomatis' secara default ke nilai titik data maksimum dalam set. Default: ['auto' | 'auto'] .
|
values
|
boolean | Menampilkan atau menyembunyikan nilai yang dirender di sepanjang sumbu. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'bar',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
],
}}
>
<Visualization />
</Query>
Properti diagram garis
Berikut adalah properti config
untuk diagram garis.
Properti | Nilai | Catatan |
---|---|---|
type
|
'line'
|
|
legend
|
false (untuk menonaktifkan) ATAU { position: 'left' | 'bottom' | 'right' | 'top' }
|
Menetapkan posisi legenda atau menonaktifkan legenda dengan menyetelnya ke false . Default: { position: 'bottom' }
|
render_null_values
|
boolean | Memperlakukan nilai null sebagai 0. Default: false
|
tooltips
|
boolean | Aktifkan atau nonaktifkan tooltip yang muncul saat mengarahkan kursor ke titik data. Default: true
|
series
|
serial dalam format view_name.field_name
|
Lihat bagian serial untuk opsi konfigurasi dan contoh penggunaan. |
x_axis
|
konfigurasi sumbu x | Lihat bagian sumbu x untuk opsi konfigurasi dan contoh penggunaan. |
y_axis
|
konfigurasi sumbu y | Lihat bagian sumbu y untuk opsi konfigurasi dan contoh penggunaan. |
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'line',
legend: { position: 'left' },
render_null_values: true,
tooltips: true,
}}
>
<Visualization />
</Query>
series
Properti series
dapat menerima array konfigurasi deret atau objek bernama yang menggantikan deret tertentu dalam respons Anda.
Properti | Nilai | Catatan |
---|---|---|
color
|
string | Kode heksadesimal |
label
|
string | |
line_width
|
angka | Setel lebar goresan garis dalam piksel. Default: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Tetapkan bentuk titik. Default: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Tetapkan gaya titik. Default: 'none' (poin dinonaktifkan)
|
visible
|
boolean | Menampilkan atau menyembunyikan deret data. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'line',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'line',
series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
}}
>
<Visualization />
</Query>
x_axis
Meskipun diagram kami saat ini hanya mendukung sumbu x tunggal, API kami sudah siap menghadapi masa depan dan terstruktur untuk mendukung konfigurasi beberapa sumbu.
Properti | Nilai | Catatan |
---|---|---|
gridlines
|
boolean | Menampilkan atau menyembunyikan garis petak vertikal. Default: false .
|
label
|
false (untuk menyembunyikan label) | string (nilai untuk dirender)
|
Menetapkan nilai yang akan dirender sebagai label sumbu x. Default: false (tanpa label)
|
reversed
|
boolean | Membalik urutan titik data. Default: false
|
values
|
boolean | Menampilkan atau menyembunyikan nilai yang dirender di sepanjang sumbu. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'line',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Meskipun diagram kami saat ini hanya mendukung satu sumbu y, API kami sudah siap menghadapi masa depan dan terstruktur untuk mendukung konfigurasi beberapa sumbu.
Properti | Nilai | Catatan |
---|---|---|
gridlines
|
boolean | Menampilkan atau menyembunyikan garis petak vertikal. Default: false
|
label
|
false (untuk menyembunyikan label) | string (nilai untuk dirender)
|
Menetapkan nilai yang akan dirender sebagai label sumbu y. Default: false (tanpa label)
|
range
|
[angka (minimum) | 'auto' , angka (maks) | 'auto' |
Menetapkan nilai minimum dan maksimum dari sumbu y. Menyetel mnt ke 'otomatis' nilai default-nya adalah 0, dan menyetel nilai maksimum ke 'otomatis' secara default ke nilai titik data maksimum dalam set. Default: ['auto' | 'auto'] .
|
values
|
boolean | Menampilkan atau menyembunyikan nilai yang dirender di sepanjang sumbu. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'line',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
],
}}
>
<Visualization />
</Query>
Properti diagram sebar
Berikut adalah properti config
untuk diagram sebar.
Properti | Nilai | Catatan |
---|---|---|
type
|
'scatter'
|
|
legend
|
false (untuk menonaktifkan) ATAU { position: 'left' | 'bottom' | 'right' | 'top' }
|
Menetapkan posisi legenda atau menonaktifkan legenda dengan menyetelnya ke false . Default: { position: 'bottom' }
|
render_null_values
|
boolean | Memperlakukan nilai null sebagai 0. Default: false
|
tooltips
|
boolean | Aktifkan atau nonaktifkan tooltip yang muncul saat mengarahkan kursor ke titik data. Default: true
|
series
|
serial dalam format view_name.field_name
|
Lihat bagian serial untuk opsi konfigurasi dan contoh penggunaan. |
x_axis
|
konfigurasi sumbu x | Lihat bagian sumbu x untuk opsi konfigurasi dan contoh penggunaan. |
y_axis
|
konfigurasi sumbu y | Lihat bagian sumbu y untuk opsi konfigurasi dan contoh penggunaan. |
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'scatter',
legend: { position: 'left' },
render_null_values: true,
tooltips: true,
}}
>
<Visualization />
</Query>
series
Properti series
dapat menerima array konfigurasi deret atau objek bernama yang menggantikan deret tertentu dalam respons Anda.
Properti | Nilai | Catatan |
---|---|---|
color
|
string | Kode heksadesimal |
label
|
string | |
line_width
|
angka | Digunakan untuk menentukan ukuran titik di sebuah diagram pencar. Anggap saja hal itu sebagai garis besar dari setiap poin. Default: 3
|
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Tetapkan bentuk titik. Default: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Tetapkan gaya titik. Default: 'none' (poin dinonaktifkan)
|
size_by
|
false | {i>string<i}
|
Nama deret yang akan dikalibrasi ukuran setiap titik. Setel false untuk menonaktifkan pengukuran titik dinamis. Default: false
|
visible
|
boolean | Menampilkan atau menyembunyikan deret data. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'scatter',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
size_by: 'orders.count',
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'scatter',
series: [
{
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
size_by: 'orders.count',
},
],
}}
>
<Visualization />
</Query>
x_axis
Meskipun diagram kami saat ini hanya mendukung sumbu x tunggal, API kami sudah siap menghadapi masa depan dan terstruktur untuk mendukung konfigurasi beberapa sumbu.
Properti | Nilai | Catatan |
---|---|---|
gridlines
|
boolean | Menampilkan atau menyembunyikan garis petak vertikal. Default: false .
|
label
|
false (untuk menyembunyikan label) | string (nilai untuk dirender)
|
Menetapkan nilai yang akan dirender sebagai label sumbu x. Default: false (tanpa label)
|
reversed
|
boolean | Membalik urutan titik data. Default: false
|
values
|
boolean | Menampilkan atau menyembunyikan nilai yang dirender di sepanjang sumbu. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'scatter',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Meskipun diagram kami saat ini hanya mendukung satu sumbu y, API kami sudah siap menghadapi masa depan dan terstruktur untuk mendukung konfigurasi beberapa sumbu.
Properti | Nilai | Catatan |
---|---|---|
gridlines
|
boolean | Menampilkan atau menyembunyikan garis petak vertikal. Default: false .
|
label
|
false (untuk menyembunyikan label) | string (nilai untuk dirender)
|
Menetapkan nilai yang akan dirender sebagai label sumbu y. Default: false (tanpa label)
|
range
|
[angka (minimum) | 'auto' , angka (maks) | 'auto' |
Menetapkan nilai minimum dan maksimum dari sumbu y. Menyetel mnt ke 'otomatis' nilai default-nya adalah 0, dan menyetel nilai maksimum ke 'otomatis' secara default ke nilai titik data maksimum dalam set. Default: ['auto' | 'auto'] .
|
values
|
boolean | Menampilkan atau menyembunyikan nilai yang dirender di sepanjang sumbu. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'scatter',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
],
}}
>
<Visualization />
</Query>
Properti diagram nilai tunggal
Berikut adalah properti config
untuk diagram nilai tunggal.
Properti | Nilai | Catatan |
---|---|---|
type
|
'single_value'
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query query='12345' config={{ type: 'single_value' }}>
<Visualization />
</Query>
Properti diagram garis percik
Berikut adalah properti config
untuk diagram garis percik.
Properti | Nilai | Catatan |
---|---|---|
type
|
'sparkline'
|
|
render_null_values
|
boolean | Memperlakukan nilai null sebagai 0. Default: false
|
series
|
serial dalam format view_name.field_name
|
Lihat bagian serial untuk opsi konfigurasi dan contoh penggunaan. |
y_axis
|
konfigurasi sumbu y | Lihat bagian sumbu y untuk opsi konfigurasi dan contoh penggunaan. |
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query="12345"
config={{ type: 'sparkline', render_null_values: true }}
>
<Visualization />
</Query>
series
Meskipun Sparkline secara inheren hanya mendukung satu seri, kami mempertahankan pola API yang melibatkan penggantian rangkaian bernama atau array agar tetap konsisten dengan jenis diagram lain di library kami.
Properti | Nilai | Catatan |
---|---|---|
color
|
string | Kode heksadesimal |
line_width
|
angka | Setel lebar goresan garis dalam piksel. Default: 3
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'sparkline',
series: {
'orders.count': {
color: '#4285F4',
line_width: 10,
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'scatter',
series: [
{
color: '#4285F4',
line_width: 10,
},
],
}}
>
<Visualization />
</Query>
y_axis
Meskipun diagram kami saat ini hanya mendukung satu sumbu y, API kami sudah siap menghadapi masa depan dan terstruktur untuk mendukung konfigurasi beberapa sumbu.
Properti | Nilai | Catatan |
---|---|---|
range
|
[angka (minimum) | 'auto' , angka (maks) | 'auto' |
Menetapkan nilai minimum dan maksimum dari sumbu y. Menyetel mnt ke 'otomatis' nilai default-nya adalah 0, dan menyetel nilai maksimum ke 'otomatis' secara default ke nilai titik data maksimum dalam set. Default: ['auto' | 'auto'] .
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'sparkline',
y_axis: [
{ range: [50, 'auto'] },
],
}}
>
<Visualization />
</Query>
Properti diagram tabel
Berikut adalah properti config
untuk diagram tabel.
Properti | Nilai | Catatan |
---|---|---|
type
|
'table'
|
|
series
|
serial dalam format view_name.field_name
|
Lihat bagian serial untuk opsi konfigurasi dan contoh penggunaan. |
column_order
|
string[]
|
Array nama deret (misalnya, 'orders.count' ) yang menunjukkan bagaimana Anda ingin kolom tabel diurutkan dari kiri ke kanan.
|
show_row_numbers
|
boolean
|
Alihkan tampilan baris total di bagian bawah tabel. Default: true
|
show_totals
|
boolean
|
Alihkan tampilan baris total di bagian bawah tabel. Default: true
|
show_row_totals
|
boolean
|
Alihkan tampilan total baris di sisi kanan tabel. Default: true
|
truncate_text
|
boolean
|
Jika true , teks sel tabel dibatasi ke satu baris dan tambahan konten akan terpotong dengan elipsis. Jika false , konten diizinkan untuk digabungkan ke beberapa baris. Default: true
|
truncate_header
|
boolean
|
Saat true , label header tabel dibatasi ke satu baris dan konten tambahan akan terpotong dengan elipsis. Saat false , header diizinkan untuk digabungkan menjadi beberapa baris. Default: true
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'table',
column_order: ['orders.count', 'users.city'],
show_row_numbers: true,
show_totals: true,
show_row_totals: true,
truncate_text: true,
truncate_header: true
}}
>
<Visualization />
</Query>
series
Properti seri dapat menerima array konfigurasi deret atau objek bernama yang menggantikan deret tertentu dalam respons Anda.
Properti | Nilai | Catatan |
---|---|---|
cell_visualization
|
boolean
|
Mengaktifkan atau menonaktifkan visualisasi sel inline. Default-nya adalah true untuk pengukuran pertama, dan false untuk pengukuran lainnya.
|
color
|
string
|
Menentukan warna yang digunakan untuk merender visualisasi sel tabel. |
value_format
|
string
|
String pemformatan angka yang menunjukkan apakah nilai akan dirender sebagai mata uang, presisi floating point, apakah akan menggunakan koma atau titik untuk menunjukkan ribuan, dan sebagainya. |
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'table',
series: {
'orders.count': {
color: '#4285F4',
cell_visualization: true,
value_format: '$#,##0.00',
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'table',
series: [{
color: '#4285F4',
cell_visualization: true,
value_format: '$#,##0.00',
}]
}}
>
<Visualization />
</Query>
Properti diagram lingkaran
Berikut adalah properti config
untuk diagram lingkaran.
Properti | Nilai | Catatan |
---|---|---|
type
|
'pie'
|
|
legend
|
false (untuk menonaktifkan) | konfigurasi legenda
|
Menyetel ke false akan menonaktifkan legenda. Default: diaktifkan. Lihat bagian legend untuk opsi konfigurasi dan contoh penggunaan saat diaktifkan.
|
tooltips
|
boolean | Aktifkan atau nonaktifkan tooltip yang muncul saat mengarahkan kursor ke titik data. Default: true
|
series
|
serial dalam format view_name.field_name
|
Lihat bagian serial untuk opsi konfigurasi dan contoh penggunaan. |
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'pie',
legend: false,
tooltips: true,
}}
>
<Visualization />
</Query>
legend
Properti legend
dapat menerima konfigurasi legenda berikut:
Properti | Nilai | Catatan |
---|---|---|
type
|
'labels' | 'legend'
|
labels menempatkan label yang mengarah langsung ke setiap irisan. legend menempatkan legenda terpisah. Default: 'legend'
|
position
|
'top' | 'bottom' | 'left' | 'right'
|
Posisikan legenda saat type: 'legend' . Default: 'right'
|
width
|
angka | Lebar maksimum legenda dalam piksel saat type: 'legend' . Default: 300
|
value
|
'label' | 'label_value' | 'value' | 'percent' | 'label_percent'
|
Menetapkan konten legenda: label, label dan nilai, nilai, persen, label, dan persen. Default: 'label_percent'
|
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'pie',
legend: {
type: 'legend'
position: 'right'
width: 200,
value: 'label_value',
},
}}
>
<Visualization />
</Query>
series
Tidak seperti diagram Kartesius, setiap titik data dalam diagram lingkaran diperlakukan sebagai deret baru:
Properti | Nilai | Catatan |
---|---|---|
color
|
string | Kode heksadesimal |
Contoh penggunaan:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'pie',
series: {
'New York': {
color: '#4285F4',
},
'Los Angeles': {
color: '#b73ec3',
},
'Chicago': {
color: '#db4da8',
},
},
}}
>
<Visualization />
</Query>