![cht=p&chd=s:Uf9a&chs=75x50](https://developers-dot-devsite-v2-prod.appspot.com/static/chart/image/images/chart_263.png?authuser=3&hl=id)
Dokumen ini menjelaskan cara membuat diagram lingkaran menggunakan Chart API.
Daftar Isi
Fitur Khusus Diagram
|
Fitur Standar
|
Ringkasan
Diagram lingkaran baik untuk menampilkan informasi proporsional bagian ke keseluruhan yang sederhana. Anda dapat membuat diagram lingkaran deret tunggal, dengan setiap deret terdiri dari beberapa irisan, atau diagram konsentris multi-seri.
Setiap deret menjelaskan satu lingkaran, dan setiap nilai data menentukan satu irisan. Saat menggunakan diagram lingkaran bertingkat (dijelaskan di bawah), gunakan beberapa deret.
Untuk menampilkan teks yang terkait dengan slice, Anda harus menggunakan label diagram lingkaran atau legenda diagram. Label diagram lingkaran adalah teks di sekitar diagram dengan garis yang menunjuk ke arah irisan. Legenda adalah teks yang terkait dengan warna.
Label | Legenda | Label dan Legenda |
---|---|---|
![]() chl=January|February|March|April |
![]() chdl=January|February|March|April |
![]() chl=January|February|March|April |
Nilai-nilai ditampilkan relatif terhadap satu sama lain: sehingga diagram dengan nilai 1,2,3 akan terlihat sama dengan diagram dengan nilai 100.200.300. Namun, saat menggunakan data format teks, nilai yang lebih besar dari 100 akan dipangkas menjadi 100, sehingga Anda harus menggunakan format teks dengan penskalaan kustom untuk menampilkan irisan yang lebih besar dari 100 dengan benar (gunakan parameter chds
dengan nilai min/maks chds=0,<max-slice-size>
).
Nilai negatif ditampilkan sebagai irisan kosong dengan ukuran yang sesuai.
Jenis Diagram
Ada tiga jenis diagram lingkaran umum yang dapat Anda buat: datar, konsentris, atau 3D. Tentukan diagram lingkaran dengan sintaksis berikut:
Sintaksis
cht=<chart_type>
Dengan <chart_type>
adalah salah satu jenis berikut:
Parameter | Deskripsi | Contoh |
---|---|---|
|
Diagram lingkaran dua dimensi. Berikan satu deret data saja; deret data berikutnya diabaikan. Secara default, warna segmen lingkaran diinterpolasi dari oranye tua hingga kuning pucat. Tentukan warna lain seperti yang dijelaskan dalam Warna Seri. Tentukan label dengan Google Chart API menghitung radius lingkaran dari lebar dan tinggi minimum
yang ditentukan dalam parameter ukuran diagram ( |
|
|
Bagan pai tiga dimensi. Tentukan data dan pemformatan dengan cara yang sama seperti diagram lingkaran dua dimensi, di atas. Jika Anda menyertakan label dalam diagram lingkaran tiga dimensi, Anda mungkin harus menentukan ukuran lebarnya menjadi 2,5 kali ukuran tinggi, untuk memastikan bahwa label Anda terlihat sepenuhnya. |
|
|
Diagram lingkaran konsentris. Sediakan dua deret data atau lebih. |
|
Semua jenis | Jumlah negatif dalam data menyebabkan irisan yang "kosong". | ![]() cht=pc |
Warna Seri chco
Anda dapat menentukan warna semua nilai, setiap nilai, atau beberapa nilai menggunakan parameter chco
.
Sintaksis
chco=<slice_1>|<slice_2>|<slice_n>,<series_color_1>,...,<series_color_n>
- <color>
- Warna irisan dalam format heksadesimal RRGGBB. Tentukan satu warna deret tunggal dan semua irisan dalam deret tersebut akan diberi warna gradasi warna tersebut dari yang paling gelap (anggota data pertama) hingga yang paling terang (anggota data terakhir). Tentukan dua warna atau lebih yang dipisahkan oleh tanda | untuk mendeskripsikan warna irisan tersendiri. Jika memiliki beberapa deret (yaitu diagram dengan cincin konsentris), Anda dapat menentukan nilai untuk deret yang berbeda dengan memisahkan nilainya menggunakan koma. Jika warna irisan/seri yang diberikan lebih sedikit daripada slice/seri yang ditampilkan, diagram akan disikluskan dari awal daftar irisan untuk deret, atau daftar deret untuk diagram. Anda tidak dapat menentukan gradien yang berbeda untuk setiap deret dalam diagram multi-seri.
Deskripsi | Contoh |
---|---|
Tentukan satu warna yang akan memiliki gradasi dari yang paling gelap (irisan pertama) ke paling terang (irisan terakhir). |
|
Mendefinisikan gradien; di sini, dari kuning ke merah. | ![]()
|
Menentukan warna irisan individual; menentukan satu warna per irisan. | ![]() chd=t:10,20,30 |
Diagram ini memiliki dua deret data, tetapi menentukan warna sebagai satu gradien di semua irisan dari kuning ke merah (BBBB00—BB0000). | ![]() chco=BBBB00,BB0000 |
Berikut adalah diagram konsentris yang mencakup warna deret dan warna irisan individual. Diagram memiliki dua deret data konsentris. Dalam bentuk yang dapat dibaca manusia, warnanya adalah chco=green|merah,biru|kuning. Koma memecahnya menjadi dua rangkaian:
|
![]() chd=s:eYY,ORVM |
Label Diagram Lingkaran chl
Anda dapat menentukan label untuk setiap irisan diagram lingkaran menggunakan parameter chl
.
Anda juga dapat menampilkan legend dengan nilai yang sama atau berbeda, satu entri legenda per irisan.
Catatan tentang Nilai String: Hanya
karakter yang aman untuk URL yang diizinkan dalam string label. Agar aman, Anda harus mengenkode string apa pun ke dalam URL yang berisi karakter yang tidak ada dalam himpunan karakter 0-9a-zA-Z
.
Anda dapat menemukan encoder URL di sini.
Sintaksis
chl= <label_value>| ... <label_value>
- <label_value>
- Nilai string yang akan diterapkan ke irisan. Label diterapkan secara berurutan ke titik data di
chd
. Jika Anda memiliki beberapa deret (misalnya untuk diagram lingkaran konsentris), label diterapkan ke semua titik dalam semua urutan, dalam urutan yang ditentukan dalamchd
. Gunakan pemisah pipa (|
) di antara setiap label. Tentukan nilai intervensi yang tidak ada menggunakan dua karakter pipa berturut-turut tanpa spasi:||
. Anda tidak perlu memberi label pada semua irisan.
Contoh
Deskripsi | Contoh |
---|---|
Label untuk diagram lingkaran tiga dimensi. |
|
Saat menentukan ukuran diagram dengan Umumnya, diagram lingkaran dua dimensi harus kira-kira dua kali lebarnya, dan diagram lingkaran tiga dimensi harus kira-kira dua setengah kali lebih lebar daripada tingginya, agar dapat menampilkan label dengan benar. Pada contoh pertama, label hanya ditampilkan sebagian karena diagram tidak cukup lebar. Contoh kedua menunjukkan bahwa diagram memerlukan lebar 280 piksel untuk menampilkan label secara penuh. (Batas ditambahkan secara eksplisit ke elemen |
|
Rotasi Diagram Lingkaran chp
Secara default, deret pertama digambar mulai pukul 3.00, dilanjutkan searah jarum jam di sekitar diagram, tetapi Anda dapat menentukan rotasi kustom menggunakan parameter chp
.
Sintaksis
chp=<radians>
- <radians>
- Nilai floating point yang menjelaskan berapa radian untuk memutar diagram searah jarum jam. Satu putaran penuh adalah 2π (2 pi—sekitar 6,28) radian.
Contoh
Deskripsi | Contoh |
---|---|
Untuk mengubah orientasi diagram lingkaran, gunakan |
|
Berikut adalah contoh lain dari rotasi {i>pie chart<i}. Hal ini dapat dikombinasikan dengan penanda bentuk diagram untuk membuat beberapa efek menarik. | ![]() |
Fitur Standar
Fitur lainnya di halaman ini adalah fitur bagan standar.
Judul Diagram chtt
, chts
[Semua
diagram]
Anda dapat menentukan teks judul, warna, dan ukuran font untuk diagram.
Sintaksis
chtt=<chart_title> chts=<color>,<font_size>,<opt_alignment>
chtt
- Menentukan judul diagram.
- <chart_title>
- Judul yang akan ditampilkan untuk diagram. Anda tidak dapat menentukan tempat munculnya, tetapi Anda
dapat menentukan ukuran dan warna font secara opsional. Gunakan tanda + untuk menunjukkan spasi, dan karakter pipa (
|
) untuk menunjukkan pemisah baris.
chts
[Opsional] - Warna dan ukuran
font untuk parameter chtt
.
- <color>
- Warna judul, dalam format heksadesimal RRGGBB. Warna defaultnya adalah hitam.
- <font_size>
- Ukuran font judul, dalam poin.
- <opt_alignment>
- [Opsional] Perataan judul. Pilih salah satu nilai string yang peka huruf besar/kecil berikut: "l" (kiri), "c" (tengah), "r" (kanan). Nilai defaultnya adalah "c".
Contoh
Deskripsi | Contoh |
---|---|
Diagram dengan judul, menggunakan warna dan ukuran font default. Tentukan ruang dengan tanda plus ( Gunakan karakter pipa (
|
![]() chtt=Site+visitors+by+month| |
Diagram dengan judul 20 titik berwarna biru, rata kanan. |
![]() chtt=Site+visitors |
Teks dan Gaya Legenda Diagram chdl
, chdlp
, chdls
[Semua
diagram]
Legenda adalah bagian samping diagram yang memberikan deskripsi teks kecil untuk setiap deret. Anda dapat menentukan teks yang terkait dengan setiap deret dalam legenda ini, dan menentukan di bagian diagram mana teks tersebut akan muncul.
Lihat juga chma
, untuk mempelajari cara menetapkan margin di sekitar legenda.
Catatan tentang nilai
string: Hanya
karakter yang aman untuk URL yang diizinkan dalam string label. Agar aman, Anda harus mengenkode string apa pun ke dalam URL yang berisi karakter yang tidak ada dalam himpunan karakter 0-9a-zA-Z
.
Anda dapat menemukan encoder URL di Dokumentasi
Visualisasi Google.
Sintaksis
chdl=<data_series_1_label>|...|<data_series_n_label> chdlp=<opt_position>|<opt_label_order> chdls=<color>,<size>
chdl
- Teks untuk setiap deret, yang akan ditampilkan di
legenda.
- <data_series_label>
- Teks untuk entri legenda. Setiap label berlaku untuk deret yang sesuai dalam array
chd
. Gunakan tanda + untuk ruang. Jika Anda tidak menentukan parameter ini, diagram tidak akan mendapatkan legenda. Tidak ada cara untuk menentukan baris baru dalam label. Legenda biasanya akan diperluas untuk menampung teks legenda, dan area diagram akan mengecil untuk mengakomodasi legenda.
chdlp
- [Opsional] Posisi legenda, dan urutan entri legenda. Anda dapat menentukan <position>
dan/atau <label_order>. Jika Anda menentukan keduanya, pisahkan keduanya dengan karakter
batang. Anda dapat menambahkan 's' ke nilai apa pun jika ingin entri legenda kosong di chdl
dilewati dalam legenda. Contoh: chdlp=bv
, chdlp=r
, chdlp=bv|r
, chdlp=bvs|r
- <opt_position>
- [Opsional] Menentukan posisi legenda pada diagram. Untuk menentukan padding tambahan antara legenda dan area diagram atau batas gambar, gunakan parameter
chma
. Pilih salah satu nilai berikut:b
- Legenda di bagian bawah diagram, entri legenda dalam baris horizontal.bv
- Legenda di bagian bawah diagram, entri legenda di kolom vertikal.t
- Legenda di bagian atas diagram, entri legenda dalam baris horizontal.tv
- Legenda di bagian atas diagram, entri legenda di kolom vertikal.r
- [Default] Legenda di sebelah kanan diagram, entri legenda di kolom vertikal.l
- Legenda di sebelah kiri diagram, entri legenda dalam kolom vertikal.
- <opt_label_order>
- [Opsional]
Urutan label ditampilkan di legenda.
Pilih salah satu nilai berikut:
l
- [Default for vertical legends] Menampilkan label dalam urutan yang diberikan kechdl
.r
- Menampilkan label dalam urutan terbalik seperti yang diberikan padachdl
. Hal ini berguna dalam diagram batang bertumpuk untuk menampilkan legenda
dalam urutan yang sama dengan batang yang muncul.a
- [Default untuk legenda horizontal] Pengurutan otomatis: secara kasar berarti mengurutkan menurut panjang, terpendek terlebih dahulu, sebagaimana diukur dalam blok 10 piksel. Jika dua elemen memiliki panjang yang sama (dibagi menjadi 10 blok piksel), elemen yang tercantum pertama akan muncul terlebih dahulu.0,1,2...
- Urutan label khusus. Daftar ini adalah daftar indeks label berbasis nol darichdl
, yang dipisahkan dengan koma.
chdls
- [Opsional] Menentukan warna dan ukuran font teks legenda.
- <color>
- Warna teks legenda, dalam format heksadesimal RRGGBB.
- <size>
- Ukuran titik teks legenda.
Contoh
Deskripsi | Contoh |
---|---|
Dua contoh legenda. Tentukan teks legenda dalam urutan yang sama dengan deret data Anda. |
chdl=NASDAQ|FTSE100|DOW
chdl=First|Second|Third |
Diagram pertama menunjukkan entri legenda horizontal ( |
|
Contoh ini menunjukkan perubahan ukuran font. |
|
Margin Diagram chma
[Semua
diagram]
Anda dapat menentukan ukuran margin diagram, dalam piksel. Margin dihitung ke dalam dari ukuran diagram yang ditentukan (chs
); menambah ukuran margin tidak akan meningkatkan total ukuran diagram, tetapi akan memperkecil tampilan area diagram, jika perlu.
Secara default, margin yang tersisa setelah ukuran diagram dihitung. Nilai default ini bervariasi menurut jenis diagram. Margin yang Anda tentukan adalah nilai minimum; jika area diagram menyisakan ruang untuk margin, ukuran marginnya adalah apa pun yang tersisa; Anda tidak dapat menekan margin yang lebih kecil dari yang diperlukan untuk legenda dan label. Berikut adalah diagram yang menunjukkan bagian-bagian dasar diagram:
![]() |
Margin diagram berisi label sumbu dan area
legend. Area legenda
diubah ukurannya secara otomatis agar sesuai dengan teks dengan tepat, kecuali jika Anda menentukan lebar
yang lebih besar menggunakan Tips: Dalam diagram batang, jika batang memiliki ukuran tetap (default), lebar area diagram tidak dapat dikurangi. Anda harus menentukan ukuran batang yang lebih kecil atau dapat diubah
menggunakan |
Sintaksis
chma= <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>
- <left_margin>, <right_margin>, <top_margin>, <bottom_margin>
- Ukuran margin minimum di sekeliling area diagram, dalam piksel. Tingkatkan nilai ini untuk menyertakan padding tertentu guna mencegah label sumbu tumpang-tindih dengan batas diagram.
- <opt_legend_width>, <opt_legend_height>
- [Opsional] Lebar margin di sekitar legenda, dalam piksel. Gunakan metode ini agar legenda tidak tumpang tindih dengan area diagram atau tepi gambar.
Contoh
Deskripsi | Contoh |
---|---|
Dalam contoh ini, diagram memiliki margin minimum 30 piksel di setiap sisi. Karena lebar legenda diagram lebih dari 30 piksel, margin di sisi kanan disetel sesuai lebar legenda diagram, dan berbeda dari margin lainnya. Label sumbu berada di luar area plot, sehingga ditempatkan di dalam ruang margin. |
|
Untuk menambahkan margin di sekitar legenda, tetapkan nilai untuk parameter Dalam contoh ini, lebar legenda adalah sekitar 60 piksel. Jika Anda menetapkan |
|
Gaya dan Label Sumbu [Garis, Batang, Google-o-meter, Radar, Sebar]
Anda dapat menentukan sumbu yang akan ditampilkan pada diagram, dan memberinya label khusus serta posisi, rentang, dan gaya.
Tidak semua diagram menampilkan garis sumbu secara default. Anda dapat menentukan dengan tepat sumbu yang harus ditampilkan diagram menggunakan parameter chxt
. Garis sumbu default
tidak menampilkan angka; Anda harus menentukan sumbu dalam parameter chxt
untuk menampilkan angka.
Anda dapat memilih agar
sumbu menampilkan angka yang mencerminkan nilai data, atau Anda dapat menentukan sumbu kustom.
Defaultnya adalah menampilkan nilai numerik, dengan nilai yang diskalakan ke rentang 0—100.
Namun, Anda dapat mengubah rentang tersebut menggunakan chxr
untuk menampilkan rentang apa pun, dan Anda dapat menata gaya nilainya (misalnya, untuk menampilkan simbol mata uang atau tempat desimal) menggunakan chxs
.
Jika memilih untuk menggunakan nilai
kustom, misalnya: "Sen, Sel, Rab", Anda dapat menggunakan parameter chxl
.
Untuk menempatkan label ini di lokasi tertentu di sepanjang sumbu, gunakan parameter chxp
.
Terakhir, Anda dapat menggunakan parameter chxs
dan chxtc
untuk menentukan warna, ukuran, perataan, dan properti lainnya dari label sumbu kustom dan
numerik.
Catatan tentang nilai
string: Hanya
karakter yang aman untuk URL yang diizinkan dalam string label. Agar aman, Anda harus mengenkode string apa pun ke dalam URL yang berisi karakter yang tidak ada dalam himpunan karakter 0-9a-zA-Z
.
Anda dapat menemukan encoder URL di Dokumentasi
Visualisasi Google.
Bagian ini membahas topik berikut:
- Sumbu Terlihat (
chxt
) - Sumbu yang akan ditampilkan. - Rentang sumbu (
chxr
) - Rentang nilai untuk setiap sumbu. - Label Sumbu Kustom (
chxl
) - Nilai kustom untuk ditampilkan pada sumbu. - Posisi label sumbu (
chxp
) - Penempatan label khusus di sepanjang setiap sumbu. - Gaya label sumbu (
chxs
) - Warna, ukuran, perataan, dan format label sumbu. - Gaya tanda centang sumbu (
chxtc
) - Panjang tanda centang untuk sumbu tertentu.
Sumbu Terlihat chxt
Diagram batang, garis, radar, dan sebar menampilkan satu atau dua garis sumbu secara default, tetapi garis ini tidak menyertakan nilai.
Untuk menampilkan nilai pada garis sumbu, atau untuk mengubah sumbu yang ditampilkan, Anda harus menggunakan parameter chxt
.
Secara default, nilai sumbu berkisar dari 0-100, kecuali jika Anda menskalakannya secara eksplisit menggunakan properti chxr
. Untuk menyembunyikan semua garis sumbu dalam diagram garis, tentukan :nda
setelah nilai jenis diagram dalam parameter cht
(contoh: cht=lc:nda
).
Secara default, sumbu atas dan bawah tidak menampilkan tanda centang berdasarkan nilai, sedangkan sumbu kiri dan kanan menunjukkannya. Anda dapat mengubah perilaku ini menggunakan parameter chxs
.
Sintaksis
chxt= <axis_1> ,..., <axis_n>
- <axis>
- Sumbu untuk ditampilkan pada diagram. Sumbu
yang tersedia adalah:
x
- Sumbu x bawaht
- Sumbu x atas [Tidak didukung oleh Google-o-Meter]y
- Sumbu y kirir
- Sumbu y kanan [Tidak didukung oleh Google-o-Meter]
Anda dapat menentukan beberapa sumbu dari jenis yang sama,
misalnya: cht=x,x,y
. Tindakan ini akan menumpuk dua pasang sumbu x di sepanjang bagian bawah diagram. Hal ini berguna saat menambahkan label khusus di sepanjang
sumbu yang menunjukkan nilai numerik (lihat contoh di bawah). Sumbu digambar dari dalam ke luar, jadi jika Anda memiliki x,x
, x pertama mengacu pada salinan terdalam, x berikutnya merujuk ke salinan keluar berikutnya, dan seterusnya.
Contoh
Deskripsi | Contoh |
---|---|
Contoh ini menunjukkan diagram garis dengan sumbu x, sumbu y, sumbu atas (t), dan sumbu kanan (r). Karena tidak ada label yang ditentukan, diagram secara default memiliki rentang 0 hingga 100 untuk semua sumbu. Perhatikan bahwa secara default, sumbu atas dan bawah tidak menampilkan tanda centang berdasarkan label. |
|
Anda dapat menyertakan beberapa kumpulan label untuk setiap sumbu dengan menyertakan
nilai yang sama lebih dari sekali. Contoh ini menunjukkan dua set sumbu x dan dua set sumbu y. Hal ini tidak terlalu berguna jika hanya menggunakan label sumbu
default, seperti yang ditunjukkan di sini. Namun, Anda dapat menentukan label khusus untuk setiap salinan
setiap sumbu, menggunakan parameter chxl . |
<img <code="" dir="ltr" src="/static/chart/image/images/chart_41.png" title="chxt=x,x,y,y&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200x,y" />, terjemahkan <img <code="" dir="ltr" src="/static/chart/image/images/chart_42.png" title="chxt=x,x,y,y&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200x125
|
Contoh ini menunjukkan diagram batang horizontal dengan sumbu x, sumbu y, sumbu t atas, dan sumbu r kanan. Label sumbu dihilangkan, sehingga Chart API menampilkan rentang 0 hingga 100 untuk sumbu x dan untuk sumbu t. Rentang untuk sumbu y dan sumbu r ditentukan oleh jumlah batang. Dalam hal ini, ada lima batang, sehingga Chart API menampilkan rentang 0 hingga 4. Label pertama berada di tengah-tengah batang pertama, label kedua dipusatkan di dasar batang kedua, dan seterusnya. |
|
Anda dapat menyembunyikan sumbu default dalam diagram garis dengan menentukan :nda setelah jenis diagram. |
![]() cht=lc:nda |
Rentang Sumbu chxr
Anda dapat menentukan rentang nilai yang muncul di setiap sumbu secara terpisah, menggunakan parameter chxr. Perhatikan bahwa tindakan ini tidak mengubah skala elemen diagram, hanya skala label sumbu. Jika Anda ingin membuat angka sumbu menjelaskan nilai data yang sebenarnya, tetapkan <start_val> dan <end_val> masing-masing ke nilai bawah dan atas dari rentang format data Anda. Lihat Penskalaan Sumbu untuk informasi selengkapnya.
Anda harus membuat sumbu terlihat menggunakan parameter chxt
jika ingin menentukan rentangnya.
Untuk menentukan nilai sumbu kustom, gunakan parameter chxl
.
Sintaksis
Pisahkan beberapa rentang label sumbu menggunakan
karakter pipa ( |
).
chxr= <axis_index>,<start_val>,<end_val>,<opt_step> |...| <axis_index>,<start_val>,<end_val>,<opt_step>
- <axis_index> yang
- Sumbu mana yang akan diberi label. Ini
adalah indeks berbasis nol ke dalam array sumbu yang ditentukan oleh
chxt
. Misalnya, sumbu r akan menjadi 1 dichxt=x,r,y
. - <start_val>
- Angka yang menentukan nilai rendah untuk sumbu ini.
- <end_val>
- Angka, yang menentukan nilai tinggi untuk sumbu ini.
- <opt_step>
- [Opsional] Langkah jumlah di antara titik skala pada sumbu. Tidak ada nilai langkah default; langkah dihitung untuk mencoba menampilkan kumpulan label dengan jarak yang tepat.
Contoh
Deskripsi | Contoh |
---|---|
Contoh ini menunjukkan sumbu y kiri dan kanan ( Setiap sumbu memiliki rentang yang ditentukan. Karena tidak ada label atau posisi yang ditentukan, nilai diambil dari rentang yang diberikan, dan ditempatkan secara merata dalam rentang tersebut. Dalam diagram garis, nilai tersebar merata di sepanjang sumbu x. Arah sumbu untuk sumbu r (indeks |
|
Dalam contoh ini, nilai ditentukan untuk sumbu x. Label sumbu ditempatkan secara merata di sepanjang sumbu. Nilai lima ( |
|
Label Sumbu Kustom chxl
Anda dapat menentukan label sumbu string kustom pada sumbu
mana pun, menggunakan parameter chxl
. Anda dapat menentukan label sebanyak
yang diinginkan. Jika Anda menampilkan sumbu (menggunakan parameter chxt
)
dan tidak menentukan label khusus, label numerik standar akan diterapkan.
Untuk menentukan rentang numerik kustom, gunakan chxr
parameter.
Untuk menetapkan lokasi tertentu di sepanjang sumbu untuk label Anda, gunakan parameter chxp
.
Sintaksis
Tentukan satu set parameter untuk setiap sumbu yang ingin Anda beri label. Pisahkan beberapa kumpulan label menggunakan karakter pipa ( |
).
chxl= <axis_index>:|<label_1>|...|<label_n> |...| <axis_index>:|<label_1>|...|<label_n>
- <axis_index> yang
- Sumbu mana yang akan diberi label. Ini adalah indeks ke dalam array parameter
chxt
. Misalnya, jika Anda memilikichxt=x,x,y,y
, indeks 0 akan menjadi sumbu x pertama, dan 1 akan menjadi sumbu x kedua. - <label_1>| ... |<label_n>
- Satu atau beberapa label untuk ditempatkan di sepanjang
sumbu ini. Nilai ini dapat berupa nilai string atau angka; string tidak perlu dalam tanda kutip. label_1 ditampilkan di posisi terendah pada sumbu, dan label_n ditampilkan di posisi tertinggi. Label tambahan ditempatkan secara merata di antara label tersebut.
Tandai spasi dengan tanda +. Tidak ada cara untuk menentukan baris baru dalam label. Pisahkan label dengan karakter pipa. Catatan: Jangan tempatkan pipa setelah label akhir dalam parameter
chxl
.
Contoh
Deskripsi | Contoh |
---|---|
Diagram ini menunjukkan cara menambahkan label khusus ke dua sumbu. Perhatikan bagaimana nilai-nilai tersebut berjarak secara merata, dan bagaimana nilai |
![]() chxt=x,y |
Contoh ini mencakup label sumbu di sumbu y kiri dan kanan ( |
|
Contoh ini mencakup label sumbu di sumbu y kiri dan kanan
( Contoh ini menggunakan nilai default untuk label sumbu di sumbu y sebelah kiri. |
|
Jika Anda ingin menambahkan label umum untuk mendeskripsikan keseluruhan
sumbu (misalnya, untuk memberi label pada satu sumbu
"biaya" dan "siswa" lainnya"), gunakan properti |
![]() chxt=x,x,y,y |
Posisi Label Sumbu chxp
Anda dapat menentukan label sumbu yang akan ditampilkan, baik menggunakan label default maupun
label khusus yang ditentukan menggunakan chxl
. Jika Anda tidak menentukan posisi yang tepat menggunakan parameter ini, label akan ditempatkan secara merata dan pada nilai langkah default di sepanjang sumbu. Jika Anda tidak menentukan chxl
, label tanda centang akan menjadi nilai default (biasanya nilai data, atau angka batang dalam diagram batang).
Sintaksis
Pisahkan beberapa set pemosisian menggunakan karakter pipa (|
).
chxp= <axis_1_index>,<label_1_position>,...,<label_n_position> |...| <axis_m_index>,<label_1_position>,...,<label_n_position>
- <axis_index> yang
- Sumbu yang
Anda tentukan posisinya. Ini adalah indeks ke dalam array parameter
chxt
. Misalnya, jika Anda memilikichxt=x,x,y,y
, indeks 0 akan menjadi sumbu x pertama, 1 akan menjadi sumbu x kedua, dan seterusnya. - <label_1_position>,...,<label_n_position>
- Posisi label di sepanjang sumbu. Ini adalah daftar nilai numerik yang dipisahkan koma, dengan setiap nilai menetapkan posisi label yang sesuai dalam array
chxl
: entri pertama berlaku untuk label pertama, dan seterusnya. Posisi adalah nilai dalam rentang untuk sumbu tersebut. Perhatikan bahwa nilainya akan selalu 0—100 kecuali jika Anda telah menentukan rentang kustom menggunakanchxr
. Posisi harus sebanyak yang Anda miliki label untuk sumbu tersebut.
Contoh
Deskripsi | Contoh |
---|---|
Contoh ini menyertakan label sumbu r di posisi yang ditentukan pada diagram. Teks label ditentukan menggunakan parameter Label dengan posisi Label dengan posisi |
|
Contoh ini menunjukkan nilai label default, tetapi hanya pada lokasi yang ditentukan.
|
chxt=x,y
![]() chxt=x,y chxp tidak ditetapkan |
Gaya Label Sumbu chxs
Anda dapat menentukan ukuran font, warna, dan perataan untuk label sumbu, baik label khusus maupun nilai label default. Semua label pada sumbu yang sama memiliki format yang sama. Jika memiliki beberapa salinan sumbu, Anda dapat memformat masing-masing sumbu secara berbeda. Anda juga dapat menentukan format string label, misalnya untuk menampilkan simbol mata uang atau angka nol di akhir.
Secara default, sumbu atas dan bawah tidak menampilkan tanda centang berdasarkan nilai, sedangkan sumbu kiri dan kanan menunjukkannya.
Sintaksis
Nilai untuk beberapa sumbu harus dipisahkan menggunakan karakter pipa (|
).
chxs= <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color> |...| <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
- <axis_index>
- Sumbu tempat hal ini berlaku. Ini adalah indeks berbasis nol ke dalam parameter
chxt
. - <opt_format_string>
- [Opsional] Ini adalah string format opsional yang, jika digunakan, mengikuti
tepat setelah nomor indeks sumbu tanpa koma intervensi. String diawali
dengan huruf N literal, diikuti dengan
nilai berikut, semuanya opsional:
N<preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>
Berikut arti setiap elemen:<preceding_text>
- Teks literal untuk mendahului setiap nilai.*...*
- Blok opsional yang digabungkan dengan tanda bintang literal, tempat Anda dapat menentukan detail pemformatan untuk angka. Nilai-nilai berikut didukung, dan semuanya bersifat opsional:<number_type>
- Format angka, untuk nilai numerik. Pilih salah satu opsi berikut:f
- [Default] Format floating point. Pertimbangkan juga untuk menentukan presisi menggunakan nilai <decimal_places>.p
- Format persentase. Tanda % ditambahkan secara otomatis. Catatan: Saat menggunakan format ini, nilai data dari peta 0,0 — 1,0 hingga 0 — 100% (misalnya, 0,43 akan ditampilkan sebagai 43%).e
- Format notasi ilmiah.c<CUR>
- Memformat angka dalam mata uang yang ditentukan, dengan penanda mata uang yang sesuai. Ganti<CUR>
dengan kode mata uang tiga huruf. Contoh:cEUR
untuk Euro. Anda dapat menemukan daftar kode di situs ISO, meskipun tidak semua simbol didukung.
<decimal_places>
- Bilangan bulat yang menentukan berapa banyak tempat desimal yang akan ditampilkan. Nilai dibulatkan (tidak terpotong) sesuai panjang ini. Nilai defaultnya adalah 2.z
- Menampilkan angka nol di belakang. Defaultnya adalah tidak.s
- Pemisah grup display. Defaultnya adalah tidak.x
atauy
-Menampilkan data dari koordinat x atau y, seperti yang ditentukan. Arti data x bervariasi menurut jenis diagram: lakukan eksperimen dengan diagram Anda untuk menentukan artinya. Nilai defaultnya adalah 'y'.
<following_text>
- Teks literal untuk mengikuti setiap nilai.
- <opt_label_color>
- Warna yang akan diterapkan ke teks sumbu (tetapi bukan garis sumbu), dalam format heksadesimal RRGGBB. Warna garis sumbu ditentukan secara terpisah menggunakan opt_axis_color. Nilai defaultnya adalah abu-abu.
- <opt_font_size>
- [Opsional] menentukan ukuran font dalam piksel. Parameter ini bersifat opsional.
- <opt_alignment>
- [Opsional] Penyelarasan label. Untuk sumbu atas atau bawah, hal ini menjelaskan
bagaimana label disejajarkan dengan tanda centang di atas atau di bawahnya; untuk sumbu kiri atau
kanan, hal ini menjelaskan bagaimana sejajar di dalam kotak pembatasnya, yang menyentuh
sumbu. Tentukan salah satu angka berikut:
-1
- Atas atau bawah: label berada di sebelah kanan titik skala; Kiri atau kanan: label rata kiri di areanya. Default untuk label sumbu r.0
- Atas atau bawah: label dipusatkan di titik skala; Kiri atau kanan: label dipusatkan di areanya. Default untuk label sumbu x dan t.1
- Atas atau bawah: label berada di sebelah kiri titik skala; Kiri atau kanan: label diratakan kanan di areanya. Default untuk label sumbu y.
- <opt_axis_or_tick>
- [Opsional; tidak didukung di Google o-meter] Apakah akan menampilkan
tanda centang dan/atau garis sumbu untuk sumbu ini. Tanda centang dan garis sumbu hanya
tersedia untuk sumbu terdalam (misalnya, sumbu tersebut tidak didukung untuk bagian luar
dua sumbu x). Gunakan salah satu nilai berikut:
l
(huruf kecil 'L') - Menggambar garis sumbu saja.t
- Hanya gambar tanda centang. Tanda centang adalah garis kecil di samping label sumbu.lt
- [Default] Gambar garis sumbu dan tanda centang untuk semua label._
- (Garis bawah) Gambar bukan garis sumbu atau tanda centang. Jika Anda ingin menyembunyikan garis sumbu, gunakan nilai ini.
- <tick_color>
- [Opsional; tidak didukung di Google o-meter] Warna tanda centang, dalam format heksadesimal RRGGBB. Nilai defaultnya adalah abu-abu.
- <opt_axis_color>
- [Opsional] Warna garis sumbu ini, dalam format heksadesimal RRGGBB. Nilai defaultnya adalah abu-abu.
Contoh
Deskripsi | Contoh |
---|---|
Ukuran dan warna font ditentukan untuk sumbu x kedua (Jan, Feb, Mar). |
|
Ukuran, warna, dan perataan {i>font<i} ditentukan untuk sumbu y di sebelah kanan. Tanda centang, tetapi tidak ada garis sumbu, digambar. |
|
Diagram ini mencakup tiga set data, dan menampilkan tiga set label sumbu, satu per rangkaian. Setiap kumpulan label diformat menggunakan string pemformatan kustom, seperti yang dijelaskan di sini:
Rentang label sumbu ditetapkan menggunakan parameter |
![]() chd=s: |
Gaya Tanda Centang Sumbu chxtc
Anda dapat menentukan tanda centang panjang untuk sumbu tertentu. Biasanya hal ini digunakan untuk memperluas
tanda centang di sepanjang diagram. Gunakan parameter chxs
untuk mengubah warna tanda centang.
Nilai untuk beberapa sumbu harus dipisahkan menggunakan karakter pipa (|
). Nilai-nilai dalam suatu deret harus dipisahkan dengan koma.
Sintaksis
chxtc= <axis_index_1>,<tick_length_1>,...,<tick_length_n> |...| <axis_index_m>,<tick_length_1>,...,<tick_length_n>
- <axis_index>
- Sumbu tempat hal ini berlaku. Ini adalah indeks berbasis nol ke dalam parameter
chxt
. Pisahkan nilai untuk sumbu yang berbeda menggunakan pemisah batang. - <tick_length_1>,...,<tick_length_n>
- Panjang tanda centang pada sumbu tersebut, dalam piksel. Jika satu nilai diberikan, nilai tersebut akan diterapkan ke semua nilai; jika lebih dari satu nilai diberikan, tanda centang sumbu akan disikluskan pada daftar nilai untuk sumbu tersebut. Nilai positif digambar di luar area diagram dan dipangkas oleh batas diagram. Nilai positif maksimum adalah 25. Nilai negatif digambar di dalam area diagram dan dipangkas oleh batas area diagram.
Contoh
Deskripsi | Contoh |
---|---|
Contoh penggunaan
|
|
Diagram ini menunjukkan panjang titik skala yang bergantian. chxtc menentukan dua nilai tick length untuk sumbu y (5 dan 15), dan tick yang digambar pada diagram berselang-seling di antara kedua nilai tersebut. |
![]() chxt=x,y |
Pengisian Latar Belakang chf
[Semua
diagram]
Anda dapat menentukan warna dan gaya isian untuk area data diagram dan/atau seluruh latar belakang diagram. Jenis isian meliputi isian solid, isian bergaris, dan gradien.
Anda dapat menentukan isian yang berbeda untuk area yang berbeda (misalnya, seluruh area diagram, atau hanya area data). Isi area diagram akan menimpa isian latar belakang. Semua isian ditentukan menggunakan parameter chf
,
dan Anda dapat menggabungkan berbagai jenis isian (solid, garis, gradien) dalam diagram
yang sama dengan memisahkan nilai menggunakan karakter pipa ( | ). Area diagram mengisi menimpa
isian latar belakang diagram.
Solid Fills chf
[Semua
Diagram]
Anda dapat menentukan isian solid untuk latar belakang dan/atau area diagram, atau menetapkan nilai transparansi ke seluruh diagram. Anda dapat menentukan beberapa isian menggunakan karakter pipa (|
). (Maps: hanya latar belakang).
Sintaksis
chf=<fill_type>,s,<color>|...
- <fill_type>
- Bagian diagram yang diisi. Tentukan salah satu nilai berikut:
bg
- Isi latar belakangc
- Isi area diagram. Tidak didukung untuk diagram peta.a
- Membuat seluruh diagram (termasuk latar belakang) transparan. Enam digit pertama<color>
diabaikan, dan hanya dua digit terakhir (nilai transparansi) yang diterapkan ke seluruh diagram dan semua isian.b<index>
- Isian padat batang (hanya diagram batang). Ganti <index> dengan indeks deret batang untuk diisi dengan warna solid. Efeknya mirip dengan menentukanchco
pada diagram batang. Lihat Warna Seri Diagram Batang untuk mengetahui contohnya.
- d
- Menunjukkan isian solid atau transparansi.
- <color>
- Warna pengisi, dalam format heksadesimal RRGGBB. Untuk transparansi, enam digit pertama diabaikan, tetapi tetap harus disertakan.
Contoh
Deskripsi | Contoh |
---|---|
Contoh ini mengisi latar belakang diagram dengan abu-abu pucat ( |
|
Contoh ini mengisi latar belakang diagram dengan abu-abu pucat ( |
|
Contoh ini menerapkan transparansi 50% ke seluruh diagram (80 dalam heksadesimal adalah 128, atau sekitar 50% transparansi). Perhatikan latar belakang sel tabel yang ditampilkan di diagram. |
|
Isi Gradien chf
[Garis,
Batang, Google-o-meter, Radar, Sebar,Venn]
Anda dapat menerapkan satu atau beberapa isian gradien ke area atau latar belakang diagram. Isi gradien memudar dari satu warna ke warna lain. (Pai, diagram o-meter Google: hanya latar belakang.)
Setiap isian gradien menentukan sudut, lalu dua atau lebih warna yang ditambatkan ke lokasi yang ditetapkan. Warnanya bervariasi saat berpindah dari satu anchor ke anchor lainnya. Anda harus memiliki minimal dua warna dengan nilai <color_centerpoint> yang berbeda, sehingga salah satunya dapat memudar dengan warna lainnya. Setiap gradien tambahan ditentukan oleh pasangan <color>,<color_centerpoint>.
Sintaksis
chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1> ,..., <color_n>,<color_centerpoint_n>
- <fill_type>
- Area diagram yang akan diisi. Salah satu dari kolom berikut:
bg
- Isi latar belakangc
- Isi area diagram.b<index>
- Isi gradien batang (khusus diagram batang). Ganti <index> dengan indeks deret batang untuk diisi dengan gradien. Lihat Warna Seri Diagram Batang untuk mengetahui contohnya.
- lg
- Menentukan isian gradien.
- <sudut>
- Angka yang menentukan sudut gradien dari 0 (horizontal) hingga 90 (vertikal).
- <color>
- Warna pengisi, dalam format heksadesimal RRGGBB.
- <color_centerpoint>
- Menentukan titik link untuk warna. Warna akan mulai memudar dari titik ini saat mendekati anchor lainnya. Rentang nilainya mulai dari 0,0 (tepi bawah atau kiri) hingga 1,0 (tepi atas atau kanan), dimiringkan pada sudut yang ditentukan oleh <angle>.
Contoh
Deskripsi | Contoh |
---|---|
Area diagram memiliki gradien linier horizontal, yang ditentukan dengan sudut nol derajat ( Warnanya jingga pucat ( Latar belakang diagram digambar dengan warna abu-abu ( |
|
Area diagram memiliki gradien linier diagonal (kiri bawah ke kanan atas), yang ditetapkan dengan sudut empat puluh lima derajat ( Persik ( Biru ( Latar belakang diagram digambar dengan warna abu-abu ( |
|
Area diagram memiliki gradien linier vertikal (atas ke bawah),
yang ditentukan dengan sudut sembilan puluh derajat ( Biru ( Persik ( Latar belakang diagram digambar dengan warna abu-abu ( |
|
Isi bergaris chf
[Line, Bar, Google-o-meter, Radar, Scatter, Venn]
Anda dapat menentukan isian latar belakang bergaris untuk area diagram Anda, atau seluruh diagram. (Pai, diagram o-meter Google: hanya latar belakang.)
Sintaksis
chf= <fill_type>,ls,<angle>,<color_1>,<width_1> ,..., <color_n>,<width_n>
- <fill_type>
- Area diagram yang akan diisi. Salah satu dari kolom berikut:
bg
- Isi latar belakangc
- Isi area diagramb<index>
- Isi bergaris batang (khusus diagram batang). Ganti <index> dengan indeks deret batang untuk diisi dengan garis. Lihat Warna Seri Diagram Batang untuk mengetahui contohnya.
- ls
- Menentukan isian garis linear.
- <sudut>
- Sudut semua garis, relatif terhadap sumbu y. Gunakan
0
untuk garis vertikal atau90
untuk garis horizontal. - <color>
- Warna untuk garis ini, dalam format heksadesimal RRGGBB. Ulangi <color> dan <width> untuk setiap garis tambahan. Anda harus memiliki setidaknya dua garis. Stripe akan bergantian hingga diagram diisi.
- <width>
- Lebar garis ini, dari
0
hingga1
, dengan1
adalah lebar penuh diagram. Garis diulang sampai diagram terisi. Ulangi <color> dan <width> untuk setiap garis tambahan. Anda harus memiliki setidaknya dua garis. Stripe akan bergantian hingga diagram diisi.
Contoh
Deskripsi | Contoh |
---|---|
|
![]() chf= |
|
![]() chf= |
Fungsi Data chfd
[Semua
chd
diagram]
Anda dapat menentukan fungsi kustom untuk menjalankan data diagram menggunakan sintaksis fungsi muParser. Data yang digunakan dalam fungsi dapat berasal dari salah satu dari dua sumber:
- Deret data dari
chd
- Data diambil dari deret yang ditentukan dichd
. - Rentang nilai yang dideklarasikan dalam parameter
chfd
itu sendiri - Anda mendeklarasikan nilai awal, perhentian, dan langkah untuk rentang data arbitrer.
Penting untuk diperhatikan bahwa dalam semua kasus, Anda harus menetapkan output ke rangkaian yang sudah ada di chd
; rangkaian tersebut akan ditimpa oleh output fungsi. Diagram hanya dirender setelah semua fungsi selesai diproses, sehingga jika Anda menetapkan beberapa fungsi untuk menghasilkan output ke deret data yang sama, fungsi tersebut akan dijalankan dalam urutan yang ditentukan, tetapi hanya output dari fungsi akhir yang akan digambarkan pada diagram. Perhatikan bahwa Anda dapat merangkai fungsi,
sehingga satu fungsi dapat mengambil rangkaian yang dihasilkan oleh fungsi
sebelumnya sebagai input.
Untuk menetapkan warna atau penanda chm
ke garis fungsi, tetapkan warna atau penanda ke indeks deret fungsi. Perhatikan bahwa penanda ditempatkan sesuai dengan data setelah dimanipulasi oleh fungsi.
Sintaksis
chfd= <output_series_index>,<function_data>,<function_string> |...| <output_series_index>,<function_data>,<function_string>
- <output_series_index>
- Indeks berbasis nol dari deret data dalam
chd
, yang akan menjadi tujuan penulisan output fungsi. Semua data yang ada akan sepenuhnya ditimpa oleh output fungsi. Jika deret tidak digunakan sebagai input untuk suatu fungsi, praktik terbaiknya adalah menetapkan satu nilai contoh ke deret tersebut. - <function_data>
- Variabel dan data yang akan dipetakan. Data dapat berasal dari rentang yang Anda tentukan, atau dari salah satu deret data
chd
. Anda dapat menentukan beberapa variabel untuk setiap fungsi, menggunakan pembatas ; (titik koma) untuk beberapa variabel. Perhatikan bahwa jika Anda menentukan beberapa variabel untuk fungsi tunggal, dan variabel ini memiliki jumlah titik yang berbeda, fungsi tersebut akan berhenti saat mencapai endpoint pertama. Misalnya, jika suatu fungsi menentukan x=1—5 langkah 1 dan y=1—10 langkah 1, fungsi tersebut akan berakhir saat mencapai titik kelima.
<variable_name>,<input_series_index>
ATAU
<variable_name>,<start>,<end>,<step>
- variable_name - Nama string arbitrer untuk variabel. Gunakan ini dalam fungsi yang ditentukan oleh function_string.
- input_series_index - Indeks deret data
chd
yang akan digunakan sebagai data input. - start - Nilai awal numerik rentang.
- akhir - Nilai akhir numerik dari sebuah rentang.
- step - Nilai langkah numerik dari start hingga end. Bisa positif atau negatif, tetapi tidak boleh nol.
x,0,100,1
mendeklarasikan variabel bernamax
dengan nilai 0, 1, 2, ... 100.x,0,100,1;r,0,3.1,.1
mendeklarasikan variabelx
yang sama ditambah variabel bernamar
dengan nilai 0, 0.1, 0.2, ..., 3.0, 3.1.x,0
mendeklarasikan variabel bernama x yang menggunakan data dari deretchd
pertama. Variabel ini akan digunakan oleh function_string. Nilai tersebut tidak akan dipetakan pada grafik kecuali jika Anda menentukannya di function_string. Semakin kecil langkah, semakin halus grafik Anda. - <function_string>
- Fungsi Anda, yang ditulis dalam sintaksis
muParser. Fungsi ini diterapkan ke variabel dan data yang ditentukan di variable_data.
Anda hanya dapat mereferensikan variabel yang dideklarasikan dalam kumpulan fungsi lokal ini, bukan
dalam kumpulan parameter
chfd
lainnya. Fungsi ringkasan muParser tidak didukung (min, jumlah maks, rata-rata). PENTING: Jangan lupa gunakan%2B
, bukan+
di fungsi Anda.
Contoh
Deskripsi | Contoh |
---|---|
Gelombang sinus sederhana. Beberapa hal yang perlu diperhatikan:
|
![]() cht=lc |
Baris ini menggunakan data dari parameter chd . |
![]() chd=t:5,10 |
Campuran garis fungsi dan non-fungsi. Perhatikan bagaimana warna ditentukan oleh parameter warna deret Perhatikan penempatan penanda pada output fungsi; titik data dihitung dari start, end, dan step, jadi jika rentang Anda adalah 0—11 langkah 0,1, titik 0 adalah 0, titik 1 adalah 0,1, dan seterusnya, hingga titik 110, yang memiliki nilai 11. |
![]() chd=t: |
Untuk menentukan fungsi dalam dua dimensi, gunakan diagram
|
![]() cht=lxy |
Parameter Coba klik gambar-gambar tersebut untuk membukanya dan mencobanya di playground diagram; Anda akan tertarik! |