Dokumen ini menjelaskan cara membuat diagram Venn menggunakan Chart API.

Daftar Isi

Pengantar

Diagram Venn adalah diagram dengan lingkaran tumpang tindih yang menunjukkan seberapa banyak kesamaan kelompok yang berbeda. Diagram mendukung diagram Venn dengan dua atau tiga lingkaran. Anda menentukan ukuran relatif lingkaran dan jumlah tumpang tindih antar lingkaran.

Jenis Diagram (cht)

Tentukan diagram Venn dengan sintaksis berikut:

Sintaksis

cht=v

String data adalah kumpulan hingga tujuh elemen, yang dipisahkan oleh pembatas yang sesuai dengan format data Anda, seperti yang dijelaskan di sini:

• Tiga nilai pertama menentukan ukuran tiga lingkaran: A, B, dan C. Untuk diagram yang hanya memiliki dua lingkaran, tentukan nol untuk nilai ketiga.
• Nilai keempat menentukan ukuran persimpangan A dan B.
• Nilai kelima menentukan ukuran persimpangan A dan C. Untuk diagram yang hanya memiliki dua lingkaran, jangan tentukan nilai di sini.
• Nilai keenam menentukan ukuran persimpangan B dan C. Untuk diagram yang hanya memiliki dua lingkaran, jangan tentukan nilai di sini.
• Nilai ketujuh menentukan ukuran persimpangan umum A, B, dan C. Untuk diagram yang hanya memiliki dua lingkaran, jangan tentukan nilai di sini.

Perhatikan bahwa dengan diagram Venn, semua nilai proporsional, tidak absolut. Artinya, diagram dengan nilai 10,20,30 akan terlihat sama dengan diagram dengan nilai 100.200.300 (jika jenis encoding Anda menerima nilai tersebut).

Deskripsi	Contoh
Diagram Venn tiga lingkaran.	cht=v chd=t:100,80,60,30,30,30,10
Untuk menentukan diagram dua lingkaran, tentukan nol untuk lingkaran C, dan jangan tentukan nilai tumpang-tindih yang menyertakan C.	cht=v chd=t:100,100,0,50

Warna Seri chco

Anda dapat menentukan warna semua deret, setiap deret, atau beberapa deret menggunakan parameter chco.

Sintaksis

chco=<color_1>,...,<color_n>

<color>

Warna deret, dalam format heksadesimal RRGGBB. Tentukan warna yang berbeda untuk berbagai deret dengan menambahkan nilai warna yang dipisahkan oleh koma. Jika Anda memiliki lebih sedikit warna daripada deret, warna terakhir akan diulang, tetapi dalam diagram Venn, warna yang identik dapat membuat diagram sulit dibaca.

Deskripsi	Contoh
Warna yang berbeda untuk setiap lingkaran.	chco=FF6342,ADDE63,63C6DE
Jika jumlah warna lebih sedikit daripada lingkaran, warna terakhir yang ditentukan akan diulang. Namun, hal ini membuat diagram sulit dibaca.	chco=00FF00,0000FF

Fitur Standar

Fitur lainnya di halaman ini adalah fitur bagan standar.

Kembali ke atas

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 (|) untuk memaksa pemisah baris. chts tidak ditentukan di sini.	chtt=Site+visitors+by+month| January+to+July
Diagram dengan judul 20 titik berwarna biru, rata kanan.	chtt=Site+visitors chts=FF0000,20,r

Kembali ke atas

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 ke chdl.
• r - Menampilkan label dalam urutan terbalik seperti yang diberikan pada chdl. 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 dari chdl, 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 chco=FF0000,00FF00,0000FF chdl=First|Second|Third chco=ff0000,00ff00,0000ff
Diagram pertama menunjukkan entri legenda horizontal (chdlp=t, tata letak default adalah horizontal), dan yang kedua menunjukkan entri legenda vertikal bawah (chdlp=bv).	chdl=First|Second|Third chco=ff0000,00ff00,0000ff chdlp=t chdl=First|Second|Third chco=ff0000,00ff00,0000ff chdlp=bv
Contoh ini menunjukkan perubahan ukuran font.	chdls=0000CC,14

Kembali ke atas

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 chma. Dengan begitu, ukuran margin akan diperluas lebih lebar sehingga area diagram akan menjadi lebih kecil. Anda tidak dapat memangkas legenda dengan menentukan ukuran yang terlalu kecil, tetapi Anda dapat membuatnya menggunakan lebih banyak ruang daripada yang dibutuhkan. 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 chbh.

 

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.	chma=30,30,30,30
Untuk menambahkan margin di sekitar legenda, tetapkan nilai untuk parameter <opt_legend_width> dan <opt_legend_height>. Dalam contoh ini, lebar legenda adalah sekitar 60 piksel. Jika Anda menetapkan <opt_legend_width> ke 80 piksel, margin akan diperluas hingga 20 piksel di luar legenda.	chma=20,20,20,30|80,20

Kembali ke atas

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 belakang
• c - 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 menentukan chco 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 (EFEFEF).	chf=bg,s,EFEFEF
Contoh ini mengisi latar belakang diagram dengan abu-abu pucat (EFEFEF) dan mengisi area diagram dengan warna hitam (000000).	chf=c,s,000000| bg,s,EFEFEF
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.	chf=a,s,00000080

Kembali ke atas

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 belakang
• c - 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 (0). Warnanya jingga pucat (FFE7C6), berpusat di sisi kiri (posisi 0.0), dan biru (76A4FB) yang berpusat di sisi kanan (posisi 1.0). Latar belakang diagram digambar dengan warna abu-abu (EFEFEF).	chf=   c,lg,0,   FFE7C6,0,(persik)   76A4FB,1 (biru)
Area diagram memiliki gradien linier diagonal (kiri bawah ke kanan atas), yang ditetapkan dengan sudut empat puluh lima derajat (45). Persik (FFE7C6) adalah warna pertama yang ditentukan. Bagian kiri bawah diagram menampilkan warna jingga pucat. Biru (6A4FB) adalah warna kedua yang ditentukan. Bagian kanan atas diagram berwarna biru murni. Perhatikan cara kami menentukan offset sebesar 0,75, untuk memberikan puncak biru yang memudar ke arah sudut kanan atas. Latar belakang diagram digambar dengan warna abu-abu (EFEFEF).	chf=   c,lg,45,   FFE7C6,0, (persik)   76A4FB,0.75 (biru)
Area diagram memiliki gradien linier vertikal (atas ke bawah), yang ditentukan dengan sudut sembilan puluh derajat (90). Biru (76A4FB) adalah warna pertama yang ditentukan. Bagian atas diagram berwarna biru murni. Persik (FFE7C6) adalah warna kedua yang ditentukan. Bagian bawah diagram berwarna jingga pucat. Latar belakang diagram digambar dengan warna abu-abu (EFEFEF).	chf=   c,lg,90,   FFE7C6,0, (persik)   76A4FB,0.5 (biru)

Kembali ke atas

 

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 belakang
• c - Isi area diagram
• b<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 atau 90 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 hingga 1, dengan 1 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
bg,ls,0 - Isi garis latar belakang dengan garis pada sudut nol derajat terhadap sumbu y (sejajar dengan sumbu y). Garis-garis mengisi latar belakang diagram serta area plot. CCCCCC,0.15 - Garis pertama berwarna abu-abu tua, selebar 15% dari diagram. FFFFFF,0.1 - Garis kedua berwarna putih, selebar 10% dari diagram.	chf=   bg,ls,0,   CCCCCC,0.15,   FFFFFF,0.1
c,ls,90 - Area diagram dengan garis horizontal pada sudut sembilan puluh derajat dari sumbu y. Garis-garis mengisi area plot, tetapi latar belakang diagram dihilangkan. 999999,0.25 - Garis pertama berwarna abu-abu tua, selebar 25% dari diagram. CCCCCC,0.25 - Sama seperti garis pertama, tetapi abu-abu muda. FFFFFF,0.25 - Sama seperti garis pertama, tetapi putih.	chf=   c,ls,90,   999999,0.25,   CCCCCC,0.25,   FFFFFF,0.25

Kembali ke atas