Tabel properti Visualisasi dan Kueri

Visualization

Komponen ini mengambil data dan konfigurasi dari konteks kueri dan merender visualisasi yang sesuai. Anda dapat menyesuaikan lebar dan tinggi dengan meneruskan nilai piksel numerik ke properti tersebut.

Properti Nilai Notes
width angka (dalam piksel) Default 100% saat prop tidak ditentukan.
height angka (dalam piksel) Default 500px saat prop tidak ditentukan.
chartTypeMap objek kunci/nilai Menerima objek kunci/nilai yang menentukan komponen yang akan dirender saat sistem adaptor menemukan nilai jenis diagram spesifik. 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 untuk menangani siklus permintaan/respons dan mengambil respons kueri dengan ID kueri atau nilai qid. Anda dapat meneruskan penggantian konfigurasi vis untuk digabungkan dengan respons API, dan semua data dimuat ke dalam konteks React.

Properti Nilai Notes
query angka | string 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, mulai dari nilai ini dapat menyimpan satu permintaan server tambahan.

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, terima 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 below */
  }}
  LoadingIndicator={ProgressCircular}
>
  <Visualization />
</Query>

Properti diagram area

Berikut adalah properti config untuk diagram area.

Properti Nilai Notes
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 Mengaktifkan atau menonaktifkan tooltip yang muncul saat mengarahkan kursor ke titik data. Default: true
series serial dalam format view_name.field_name Lihat bagian rangkaian 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 Notes
color string Kode heksadesimal
label string
line_width angka Menyetel 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 saat ini diagram kami hanya mendukung satu sumbu x, API kami siap menghadapi masa depan dan disusun untuk mendukung konfigurasi beberapa sumbu.

Properti Nilai Notes
gridlines boolean Menampilkan atau menyembunyikan garis petak vertikal. Default: false
label false (untuk menyembunyikan label) | string (nilai yang akan dirender) Menetapkan nilai untuk 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 saat ini diagram kami hanya mendukung satu sumbu y, API kami siap menghadapi masa depan dan disusun untuk mendukung konfigurasi beberapa sumbu.

Properti Nilai Notes
gridlines boolean Menampilkan atau menyembunyikan garis petak vertikal. Default: false.
label false (untuk menyembunyikan label) | string (nilai yang akan dirender) Menetapkan nilai untuk dirender sebagai label sumbu y. Default: false (tanpa label)
range [angka (mnt) | 'auto', angka (maks) | 'auto'] Menetapkan nilai min dan maks sumbu y. Jika nilai min disetel ke 'auto' secara default ke 0, dan menyetel nilai maks 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 Notes
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 Mengaktifkan atau menonaktifkan tooltip yang muncul saat mengarahkan kursor ke titik data.

Default: true
series serial dalam format view_name.field_name Lihat bagian rangkaian 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 Notes
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 saat ini diagram kami hanya mendukung satu sumbu x, API kami siap menghadapi masa depan dan disusun untuk mendukung konfigurasi beberapa sumbu.

Properti Nilai Notes
gridlines boolean Menampilkan atau menyembunyikan garis petak vertikal. Default: false.
label false (untuk menyembunyikan label) | string (nilai yang akan dirender) Menetapkan nilai untuk 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 saat ini diagram kami hanya mendukung satu sumbu y, API kami siap menghadapi masa depan dan disusun untuk mendukung konfigurasi beberapa sumbu.

Properti Nilai Notes
gridlines boolean Menampilkan atau menyembunyikan garis petak vertikal. Default: false.
label false (untuk menyembunyikan label) | string (nilai yang akan dirender) Menetapkan nilai untuk dirender sebagai label sumbu y. Default: false (tanpa label)
range [angka (mnt) | 'auto', angka (maks) | 'auto'] Menetapkan nilai min dan maks sumbu y. Jika nilai min ditetapkan ke 'otomatis' adalah 0, dan menetapkan nilai maks ke 'otomatis' 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: '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 Notes
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 Mengaktifkan atau menonaktifkan tooltip yang muncul saat mengarahkan kursor ke titik data. Default: true
series serial dalam format view_name.field_name Lihat bagian rangkaian 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 Notes
color string Kode heksadesimal
label string
line_width angka Menyetel 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 saat ini diagram kami hanya mendukung satu sumbu x, API kami siap menghadapi masa depan dan disusun untuk mendukung konfigurasi beberapa sumbu.

Properti Nilai Notes
gridlines boolean Menampilkan atau menyembunyikan garis petak vertikal. Default: false.
label false (untuk menyembunyikan label) | string (nilai yang akan dirender) Menetapkan nilai untuk 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 saat ini diagram kami hanya mendukung satu sumbu y, API kami siap menghadapi masa depan dan disusun untuk mendukung konfigurasi beberapa sumbu.

Properti Nilai Notes
gridlines boolean Menampilkan atau menyembunyikan garis petak vertikal. Default: false
label false (untuk menyembunyikan label) | string (nilai yang akan dirender) Menetapkan nilai untuk dirender sebagai label sumbu y. Default: false (tanpa label)
range [angka (mnt) | 'auto', angka (maks) | 'auto'] Menetapkan nilai min dan maks sumbu y. Jika nilai min ditetapkan ke 'otomatis' adalah 0, dan menetapkan nilai maks ke 'otomatis' 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: '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 Notes
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 Mengaktifkan atau menonaktifkan tooltip yang muncul saat mengarahkan kursor ke titik data. Default: true
series serial dalam format view_name.field_name Lihat bagian rangkaian 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 Notes
color string Kode heksadesimal
label string
line_width angka Digunakan untuk menetapkan ukuran titik di sebuah diagram pencar. Anggap saja hal itu sebagai nilai 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 | string Nama seri yang akan dikalibrasi ukuran setiap titik. Setel false untuk menonaktifkan penentuan ukuran 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 saat ini diagram kami hanya mendukung satu sumbu x, API kami siap menghadapi masa depan dan disusun untuk mendukung konfigurasi beberapa sumbu.

Properti Nilai Notes
gridlines boolean Menampilkan atau menyembunyikan garis petak vertikal. Default: false.
label false (untuk menyembunyikan label) | string (nilai yang akan dirender) Menetapkan nilai untuk 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 saat ini diagram kami hanya mendukung satu sumbu y, API kami siap menghadapi masa depan dan disusun untuk mendukung konfigurasi beberapa sumbu.

Properti Nilai Notes
gridlines boolean Menampilkan atau menyembunyikan garis petak vertikal. Default: false.
label false (untuk menyembunyikan label) | string (nilai yang akan dirender) Menetapkan nilai untuk dirender sebagai label sumbu y. Default: false (tanpa label)
range [angka (mnt) | 'auto', angka (maks) | 'auto'] Menetapkan nilai min dan maks sumbu y. Jika nilai min ditetapkan ke 'otomatis' adalah 0, dan menetapkan nilai maks ke 'otomatis' 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: '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 Notes
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 Notes
type 'sparkline'
render_null_values boolean Memperlakukan nilai null sebagai 0. Default: false
series serial dalam format view_name.field_name Lihat bagian rangkaian 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 pada dasarnya hanya mendukung satu deret, kami mempertahankan pola API yang melibatkan penggantian rangkaian bernama atau array agar tetap konsisten dengan jenis diagram lain dalam library kami.

Properti Nilai Notes
color string Kode heksadesimal
line_width angka Menyetel 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 saat ini diagram kami hanya mendukung satu sumbu y, API kami siap menghadapi masa depan dan disusun untuk mendukung konfigurasi beberapa sumbu.

Properti Nilai Notes
range [angka (mnt) | 'auto', angka (maks) | 'auto'] Menetapkan nilai min dan maks sumbu y. Jika nilai min ditetapkan ke 'otomatis' adalah 0, dan menetapkan nilai maks ke 'otomatis' akan ditetapkan secara default ke nilai titik data maksimum dalam kumpulan. 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 Notes
type 'table'
series serial dalam format view_name.field_name Lihat bagian rangkaian untuk opsi konfigurasi dan contoh penggunaan.
column_order string[] Array nama seri (misalnya, 'orders.count') yang menunjukkan cara Anda ingin mengurutkan kolom tabel 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 Saat true, teks sel tabel dibatasi menjadi satu baris dan overflow konten dipotong dengan elipsis. Jika false, konten diizinkan untuk digabungkan ke beberapa baris. Default: true
truncate_header boolean Saat true, label header tabel dibatasi menjadi satu baris dan tambahan konten terpotong dengan elipsis. Saat false, header diizinkan untuk digabungkan ke 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 seri atau objek bernama yang menggantikan deret tertentu dalam respons Anda.

Properti Nilai Notes
cell_visualization boolean Mengaktifkan atau menonaktifkan visualisasi sel inline. Setelan defaultnya adalah true untuk ukuran pertama, dan false untuk ukuran lainnya.
color string Tentukan warna yang digunakan untuk merender visualisasi sel tabel.
value_format string String pemformatan angka yang menunjukkan apakah akan merender nilai sebagai mata uang, presisi floating point, apakah menggunakan koma atau titik untuk menandai ribuan, dan seterusnya.

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 Notes
type 'pie'
legend false (untuk menonaktifkan) | konfigurasi legenda Menetapkan ke false akan menonaktifkan legenda. Default: diaktifkan. Lihat bagian legend untuk opsi konfigurasi dan contoh penggunaan saat diaktifkan.
tooltips boolean Mengaktifkan atau menonaktifkan tooltip yang muncul saat mengarahkan kursor ke titik data. Default: true
series serial dalam format view_name.field_name Lihat bagian rangkaian 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 Notes
type 'labels' | 'legend' labels menempatkan label yang mengarah langsung ke setiap irisan. legend menempatkan legenda terpisah. Default: 'legend'
position 'top' | 'bottom' | 'left' | 'right' Memosisikan 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 Notes
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>