KATA PENGANTAR
Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa karena dengan rahmat, karunia, serta taufik dan hidayah-Nya kami dapat menyelesaikan buku tentang Column Chart, Combo Chart, dan Diff Chart ini dengan baik meskipun banyak kekurangan didalamnya. Dan juga kami berterima kasih pada Bapak I Made Wiryana selaku Dosen mata kuliah Desain Pemodelan Grafik Universitas Gunadarma yang telah memberikan tugas ini kepada kami. Kami sangat berharap Buku ini dapat berguna dalam rangka menambah wawasan serta pengetahuan kita mengenai Teknik-teknik Column Chart, Combo Chart, dan Diff Chart. Kami juga menyadari sepenuhnya bahwa di dalam buku ini terdapat kekurangan dan jauh dari kata sempurna. Oleh sebab itu, kami berharap adanya kritik, saran dan usulan demi perbaikan buku yang telah kami buat di masa yang akan datang, mengingat tidak ada sesuatu yang sempurna tanpa saran yang membangun. Semoga buku sederhana ini dapat dipahami bagi siapapun yang membacanya. Sekiranya buku yang telah disusun ini dapat berguna bagi kami sendiri maupun orang yang membacanya. Sebelumnya kami mohon maaf apabila terdapat kesalahan kata-kata yang kurang berkenan dan kami memohon kritik dan saran yang membangun dari Anda demi perbaikan buku ini di waktu yang akan datang.
Depok, Desember 2016
Penyusun
Selasa, 24 Januari 2017
BAB 5
BAB V
KATA PENUTUP
Demikianlah buku yang kami buat semoga bermanfaat bagi orang yang membacanya dan menambah wawasan bagi orang yang membaca buku ini. Dan penulis mohon maaf apabila ada kesalahan dalam penulisan kata dan kalimat yang tidak jelas, mengerti, dan lugas mohon jangan dimasukan ke dalam hati.
Dan kami juga sangat mengharapkan yang membaca buku ini akan bertambah motivasinya dan mengapai cita-cita yang di inginkan, karena kami membuat buku ini mempunyai arti penting yang sangat mendalam.
Sekian penutup dari kami semoga berkenan di hati dan kami ucapkan terima kasih yang sebesar-besarnya.
KATA PENUTUP
Demikianlah buku yang kami buat semoga bermanfaat bagi orang yang membacanya dan menambah wawasan bagi orang yang membaca buku ini. Dan penulis mohon maaf apabila ada kesalahan dalam penulisan kata dan kalimat yang tidak jelas, mengerti, dan lugas mohon jangan dimasukan ke dalam hati.
Dan kami juga sangat mengharapkan yang membaca buku ini akan bertambah motivasinya dan mengapai cita-cita yang di inginkan, karena kami membuat buku ini mempunyai arti penting yang sangat mendalam.
Sekian penutup dari kami semoga berkenan di hati dan kami ucapkan terima kasih yang sebesar-besarnya.
BAB 4
BAB IV
CONTOH KASUS PEMANFAATAN HIGHCHART
COLUMN CHART
Sebuah grafik kolom adalah bar chart vertikal diberikan di browser menggunakan SVG atau VML , mana yang sesuai untuk browser pengguna. Seperti semua grafik Google, kolom grafik display tooltips ketika pengguna melayang di atas data. Untuk versi horizontal grafik ini, melihat grafik batang .
CONTOH :
• KOLOM MEWARNAI
Grafik kepadatan dari empat logam mulia:
Di atas, semua warna adalah biru default. Itu karena mereka semua bagian dari seri yang sama; jika ada seri kedua, yang akan telah berwarna merah. Kami dapat menyesuaikan warna-warna ini dengan peran gaya :
Ada tiga cara yang berbeda untuk memilih warna, dan tabel data kami menampilkan mereka semua: nilai RGB, nama warna bahasa Inggris, dan deklarasi CSS seperti:
• GAYA KOLOM
Peran gaya memungkinkan kendali Anda beberapa aspek dari penampilan kolom dengan deklarasi CSS seperti:
1. color
2. opacity
3. fill-color
4. fill-opacity
5. stroke-color
6. stroke-opacity
7. stroke-width
Kami tidak menyarankan Anda mencampur gaya terlalu bebas dalam bagan-memilih gaya dan tetap dengan itu-tapi untuk menunjukkan semua atribut gaya, inilah sampler:
Dua yang pertama kolom masing-masing menggunakan tertentu color (pertama dengan nama Inggris, yang kedua dengan nilai RGB). Tidak ada opacity dipilih, sehingga default dari 1,0 (sangat lengkap) digunakan; itu sebabnya kolom kedua mengaburkan gridline belakangnya. Pada kolom ketiga, opacity dari 0,2 digunakan, mengungkapkan gridline tersebut. Di keempat, tiga atribut gaya yang digunakan: stroke-color dan stroke-width untuk menarik perbatasan, dan fill-color untuk menentukan warna persegi panjang di dalam. Kolom paling kanan tambahan menggunakan stroke-opacity dan fill-opacity untuk memilih kekeruhan untuk perbatasan dan isi:
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ 'Tahun', 'kunjungan', {peran: 'gaya'}],
[ '2010', 10, 'warna: abu-abu'],
[ '2020', 14, 'color: # 76A7FA'],
[ '2030', 16, 'opacity: 0.2'],
[ '2040', 22, 'stroke color: # 703593; Stroke-width: 4; mengisi-color: # C5A5CF '],
[ '2050', 28, 'stroke color: # 871B47; Stroke-opacity: 0.6; Stroke-width: 8; mengisi-color: # BC5679; mengisi-opacity: 0.2 ']
]);
• KOLOM TABEL
Grafik memiliki beberapa jenis label, seperti label centang, label legenda, dan label dalam tooltips. Pada bagian ini, kita akan melihat bagaimana untuk menempatkan label dalam (atau dekat) kolom di bagan kolom. Katakanlah kita ingin membubuhi keterangan setiap kolom dengan simbol kimia yang sesuai. Kita dapat melakukannya dengan peran penjelasan:
Pada tabel data kami, kami mendefinisikan kolom baru dengan { role: 'annotation' } memegang label kolom kami:
Sementara pengguna dapat mengarahkan kursor ke kolom untuk melihat nilai-nilai data, Anda mungkin ingin menyertakan mereka pada kolom sendiri:
Ini adalah sedikit lebih rumit dari yang seharusnya, karena kita membuat DataView untuk menentukan penjelasan untuk masing-masing kolom.
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( "saat ini", {paket: [ 'corechart']});
google.charts.setOnLoadCallback (drawChart);
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ "Element", "Kepadatan", {peran: "gaya"}],
[ "Tembaga", 8.94, "# b87333"],
[ "Perak", 10,49, "silver"],
[ "Emas", 19.30, "emas"],
[ "Platinum", 21,45, "color: # e5e4e2"]
]);
lihat var = new google.visualization.DataView (data);
view.setColumns ([0, 1,
{Calc: "stringify",
sourceColumn: 1,
Jenis: "string",
Peran: "penjelasan"},
2]);
Pilihan var = {
title: "Kepadatan Logam Mulia, di g / cm ^ 3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
Legenda: {position: "none"},
};
var grafik = google.visualization.ColumnChart baru (document.getElementById ( "columnchart_values"));
chart.draw (lihat, opsi);
}
</ Script>
<Div id = "columnchart_values" style = "width: 900px; height: 300px;"> </ div>
Jika kita ingin memformat nilai berbeda, kita bisa mendefinisikan formatter dan membungkusnya dalam fungsi seperti ini:
berfungsi getValueAt (kolom, dataTable, baris) {
kembali dataTable.getFormattedValue (baris, kolom);
}
Kemudian kita bisa menyebutnya dengan calc: getValueAt.bind(undefined, 1) .
Jika label terlalu besar untuk muat seluruhnya di dalam kolom, itu ditampilkan di luar:
• GRAFIK KOLOM DITUMPUK
Sebuah grafik kolom ditumpuk adalah bagan kolom yang menempatkan nilai-nilai terkait atas satu sama lain. Jika ada nilai-nilai negatif, mereka ditumpuk dalam urutan terbalik di bawah baseline grafik ini. Ini biasanya digunakan ketika kategori alami terbagi menjadi komponen. Misalnya, pertimbangkan beberapa penjualan buku hipotetis, dibagi berdasarkan genre dan dibandingkan seluruh waktu:
Anda membuat bagan kolom ditumpuk dengan menetapkan isStacked pilihan untuk true :
Ditumpuk grafik kolom juga mendukung 100% susun, dimana tumpukan elemen pada setiap domain-nilai yang rescaled sehingga mereka menambahkan hingga 100%. Pilihan untuk ini isStacked: 'percent' , yang format setiap nilai sebagai persentase dari 100%, dan isStacked: 'relative' , yang format setiap nilai sebagai sebagian kecil dari 1. Ada juga isStacked: 'absolute' pilihan, yang secara fungsional setara dengan isStacked: true .
Catatan di ditumpuk grafik 100% di sebelah kanan, nilai-nilai tick didasarkan pada relatif 0-1 skala sebagai pecahan dari 1, tetapi nilai-nilai sumbu ditampilkan sebagai persentase. Hal ini karena kutu persentase sumbu adalah hasil dari menerapkan format "#. ##%" Dengan relatif 0-1 nilai skala. Bila menggunakan isStacked: 'percent' , pastikan untuk menentukan nilai-nilai kutu / axis menggunakan relatif skala 0-1.
• DITUMPUK
• 100% TUMPUKAN
• MEMBUAT MATERIAL KOLOM GRAFIK
Pada tahun 2014, Google mengumumkan pedoman dimaksudkan untuk mendukung tampilan umum dan merasa seluruh properti dan aplikasi (seperti aplikasi Android) yang berjalan di platform Google. Kami menyebutnya upaya ini Desain Material. Kami akan menyediakan "Material" versi dari semua grafik utama kami; Anda dipersilakan untuk menggunakan mereka jika Anda suka bagaimana mereka terlihat. Membuat Kolom Bagan Bahan ini mirip dengan menciptakan apa yang sekarang kita akan sebut "klasik" Kolom Chart. Anda memuat Google Visualisasi API (meskipun dengan 'bar' paket bukan 'corechart' paket), mendefinisikan DataTable Anda, dan kemudian membuat objek (tapi kelas google.charts.Bar bukan google.visualization.ColumnChart ). Sejak bar chart dan grafik kolom pada dasarnya identik tetapi untuk orientasi, kita sebut kedua Material Bar Charts, terlepas dari apakah bar vertikal (klasik, bagan kolom) atau horizontal (bar chart). Material, satu-satunya perbedaan adalah di bars pilihan. Bila diatur ke 'horizontal' , orientasi akan menyerupai tradisional klasik Bar Chart; jika tidak, bar akan vertikal.
Catatan: Charts Bahan tidak akan bekerja di versi lama dari Internet Explorer. (IE8 dan versi sebelumnya tidak mendukung SVG, yang Charts Material membutuhkan.)
Company Performance
Sales, Expenses,dan Profit:2014-2017
Charts bahan Kolom memiliki banyak perbaikan kecil lebih Charts Kolom klasik, termasuk palet warna ditingkatkan, bulat sudut, label format yang lebih jelas, jarak standar ketat antara seri, gridlines lebih lembut dan judul (dan penambahan sub judul).
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawChart);
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ 'Tahun', 'Penjualan', 'Beban', 'Laba'],
[ '2014', 1000, 400, 200],
[ '2015', 1170, 460, 250],
[ '2016', 660, 1120, 300],
[ '2017', 1030, 540, 350]
]);
Pilihan var = {
grafik: {
Judul: 'Kinerja Perusahaan,
subtitle: 'Penjualan, Biaya, dan Profit: 2014-2017',
}
};
var grafik = google.charts.Bar baru (document.getElementById ( 'columnchart_material'));
chart.draw (data, opsi);
}
</ Script>
</ Head>
<Body>
<Div id = "columnchart_material" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
Charts Material yang dalam versi beta. Penampilan dan interaktivitas sebagian besar akhir, tapi banyak dari pilihan yang tersedia di Charts Klasik belum tersedia di dalamnya. Anda dapat menemukan daftar pilihan yang belum didukung dalam masalah ini . Juga, pilihan cara dinyatakan tidak selesai, sehingga Anda harus mengkonversi pilihan Anda dengan mengganti baris ini: chart.draw(data, options); dengan ini:
chart.draw(data, google.charts.Bar.convertOptions(options));
Menggunakan google.charts.Bar.convertOptions() memungkinkan Anda untuk mengambil keuntungan dari fitur tertentu, seperti hAxis/vAxis.format pilihan preset.
• GRAFIK DUAL-Y
Catatan: sumbu Dual-Y tersedia hanya untuk grafik Material (yaitu, orang-orang dengan paket bar ).
Kadang-kadang Anda akan ingin menampilkan dua seri di bagan kolom, dengan dua independen Y-sumbu: sumbu tersisa untuk satu seri, dan sumbu yang tepat untuk yang lain:
Perhatikan bahwa tidak hanya kami dua y-sumbu berlabel berbeda ( "parsec" versus "magnitudo tampak") tetapi mereka masing-masing memiliki skala independen mereka sendiri dan gridlines. Jika Anda ingin menyesuaikan perilaku ini, gunakan vAxis.gridlines pilihan. Dalam kode di bawah ini, axes dan series pilihan bersama-sama menentukan penampilan dual-Y dari grafik. The series opsi menentukan sumbu yang digunakan untuk setiap ( 'distance' dan 'brightness' , mereka tidak perlu memiliki hubungan dengan nama kolom dalam DataTable). The axes pilihan kemudian membuat grafik ini grafik dual-Y, menempatkan 'distance' sumbu di sebelah kiri (berlabel "parsec") dan 'brightness' sumbu di sebelah kanan (berlabel "jelas besarnya").
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawStuff);
berfungsi drawStuff () {
Data var = google.visualization.arrayToDataTable baru ([
[ 'Galaxy', 'Jarak', 'Brightness'],
[ 'Canis Major Dwarf', 8000, 23,3],
[ 'Sagitarius Dwarf', 24000, 4.5],
[ 'Dwarf Ursa Major II', 30000, 14,3],
[ 'Lg. Magellanic Cloud ', 50000, 0,9],
[ 'Bootes I', 60000, 13,1]
]);
Pilihan var = {
width: 900,
grafik: {
Judul: 'galaksi Terdekat',
subtitle: 'jarak di sebelah kiri, kecerahan di sebelah kanan'
},
seri: {
0: {axis: 'jarak'}, // Ikat seri 0 sumbu bernama 'jarak'.
1: {axis: 'kecerahan'} // Ikat seri 1 ke sumbu bernama 'kecerahan'.
},
sumbu: {
y: {
Jarak: {label: 'parsec'}, // Kiri y-axis.
kecerahan: {sisi: 'kanan', label: 'magnitudo tampak'} // kanan y-axis.
}
}
};
var grafik = baru google.charts.Bar (document.getElementById ( 'dual_y_div'));
chart.draw (data, opsi);
};
</ Script>
</ Head>
<Body>
<Div id = "dual_y_div" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
• GRAFIK TOP-X
Catatan: sumbu Top-X hanya tersedia untuk grafik Material (yaitu, orang-orang dengan paket bar ).
Jika Anda ingin menempatkan label sumbu X dan judul di bagian atas grafik Anda daripada bagian bawah, Anda dapat melakukannya di tangga lagu Material dengan axes.x opsi:
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawStuff);
berfungsi drawStuff () {
Data var = google.visualization.arrayToDataTable baru ([
[ 'Pindah', 'Persentase'],
[ "Raja pion (e4)", 44],
[ "Ratu pion (d4)", 31],
[ "Knight ke King 3 (Nf3)", 12],
[ "Uskup pion Ratu (c4)", 10],
[ 'Lain', 3]
]);
Pilihan var = {
Judul: 'pembukaan Catur bergerak',
width: 900,
Legenda: {position: 'none'},
grafik: {subtitle: 'popularitas dengan persentase'},
sumbu: {
x: {
0: {sisi: 'top', label: 'White bergerak'} // Top x-axis.
}
},
bar: {groupWidth: "90%"}
};
var grafik = baru google.charts.Bar (document.getElementById ( 'top_x_div'));
// Mengkonversi pilihan klasik untuk pilihan Material.
chart.draw (data, google.charts.Bar.convertOptions (pilihan));
};
</ Script>
</ Head>
<Body>
<Div id = "top_x_div" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
Pemuatan
The google.charts.load nama paket adalah "corechart" .
google.charts.load ( "saat ini", {paket: [ "corechart"]}); Untuk Charts Kolom Material, google.charts.load nama paket adalah "bar" . (Tidak kesalahan ketik: Bahan Bar Chart menangani kedua orientasi.)
google.charts.load ( "saat ini", {paket: [ "bar"]}); Nama kelas visualisasi adalah google.visualization.ColumnChart .
var visualisasi = baru google.visualization.ColumnChart (kontainer); Untuk Charts Kolom Material, nama kelas visualisasi adalah google.charts.Bar . (Tidak kesalahan ketik: Bahan Bar Chart menangani kedua orientasi.)
var grafik = baru google.charts.Bar (kontainer); format data
Setiap baris di tabel mewakili sekelompok bar yang berdekatan.
Baris: Setiap baris di tabel mewakili sekelompok bar.
kolom:
Pilihan konfigurasi
COMBO CHARTS
Sebuah grafik yang memungkinkan Anda membuat setiap seri sebagai jenis yang berbeda penanda dari daftar berikut: garis, bidang, bar, lilin, dan daerah melangkah. Untuk menetapkan jenis penanda default untuk seri, tentukan seriesType properti. Gunakan series properti untuk menentukan sifat dari setiap seri individual.
Contoh
Pemuatan
The google.charts.load nama paket adalah "corechart"
Nama kelas visualisasi adalah google.visualization.ComboChart
Format Data
Baris: Setiap baris di tabel mewakili satu set titik data dengan lokasi sumbu x sama.
kolom:
• PILIHAN KONFIGURASI
• METODE
Acara
Untuk informasi lebih lanjut tentang cara menggunakan peristiwa ini, lihat Dasar Interaktivitas , Penanganan Events , dan Firing Acara .
Kebijakan Data
Semua kode dan data diproses dan diberikan dalam browser. Tidak ada data yang dikirim ke server apapun.
DIFF CHART
Sebuah grafik diff adalah bagan yang dirancang untuk menyoroti perbedaan antara dua grafik dengan data pembanding. Dengan membuat perubahan antara nilai analog menonjol, mereka dapat mengungkapkan variasi antara dataset. Anda membuat grafik diff dengan memanggil computeDiff metode dengan dua dataset untuk menghasilkan dataset ketiga mewakili diff, dan kemudian menggambar itu. Grafik Diff tersedia untuk bar chart , grafik kolom , diagram lingkaran , dan grafik scatter .
Charts Diff sebar
Untuk menunjukkan grafik pencar diff, mari kita pertimbangkan sepasang percobaan, masing-masing membandingkan dua obat-obatan. Berikut adalah hasil dari dua percobaan, dan grafik diff yang dihasilkan:
Jika Anda bola mata dua grafik, Anda dapat memberitahu sesuatu telah berubah, tapi sulit untuk tahu persis apa. Grafik diff pencar membuat jelas dengan menunjukkan lintasan setiap titik data.
Berikut adalah garis utama menghasilkan tiga grafik di atas:
Anda dapat mengubah opacity dari ekor dengan diff.oldData.opacity pilihan, dan opacity dari titik data baru dengan diff.newData.opacity opsi:
var options = { diff: { oldData: { opacity: 1.0 } } };
var options = { diff: { newData: { opacity: 0.5 } } };
Charts Diff Pie
Berikut kode untuk menghasilkan tiga grafik:
Anda dapat mengontrol ukuran relatif dari lingkaran dengan diff.innerCircle.radiusFactor , perbatasan antara dua dengan diff.innerCircle.borderFactor , dan transparansi masing-masing dengan diff.oldData.opacity dan diff.newData.opacity . Akhirnya, Anda dapat membalikkan perilaku sehingga data tertua mengelilingi data terbaru dengan diff.oldData.inCenter . Contoh masing-masing:
Diff Bar dan Charts Kolom
Data diff bar dan grafik kolom diff overlay baru di atas data yang lebih tua. Di sini, kita mengambil dua grafik-sederhana kolom data lama, salah satu yang baru-dan diff mereka:
Untuk contoh yang lebih rumit, mari kita lihat bagaimana popularitas beberapa nama (khususnya, nama-nama magang Visualisasi musim panas Google) telah berubah dari tahun 1980-an hingga saat ini (nomor per jutaan bayi, courtesy of Wisaya Nama Bayi ) .
Kode untuk menghasilkan keempat grafik:
Diff kolom dan bar chart membiarkan Anda mengontrol lebar relatif dari bar lama dan baru dengan diff.newData.widthFactor opsi:
CONTOH KASUS PEMANFAATAN HIGHCHART
COLUMN CHART
Sebuah grafik kolom adalah bar chart vertikal diberikan di browser menggunakan SVG atau VML , mana yang sesuai untuk browser pengguna. Seperti semua grafik Google, kolom grafik display tooltips ketika pengguna melayang di atas data. Untuk versi horizontal grafik ini, melihat grafik batang .
CONTOH :
• KOLOM MEWARNAI
Grafik kepadatan dari empat logam mulia:
Di atas, semua warna adalah biru default. Itu karena mereka semua bagian dari seri yang sama; jika ada seri kedua, yang akan telah berwarna merah. Kami dapat menyesuaikan warna-warna ini dengan peran gaya :
Ada tiga cara yang berbeda untuk memilih warna, dan tabel data kami menampilkan mereka semua: nilai RGB, nama warna bahasa Inggris, dan deklarasi CSS seperti:
• GAYA KOLOM
Peran gaya memungkinkan kendali Anda beberapa aspek dari penampilan kolom dengan deklarasi CSS seperti:
1. color
2. opacity
3. fill-color
4. fill-opacity
5. stroke-color
6. stroke-opacity
7. stroke-width
Kami tidak menyarankan Anda mencampur gaya terlalu bebas dalam bagan-memilih gaya dan tetap dengan itu-tapi untuk menunjukkan semua atribut gaya, inilah sampler:
Dua yang pertama kolom masing-masing menggunakan tertentu color (pertama dengan nama Inggris, yang kedua dengan nilai RGB). Tidak ada opacity dipilih, sehingga default dari 1,0 (sangat lengkap) digunakan; itu sebabnya kolom kedua mengaburkan gridline belakangnya. Pada kolom ketiga, opacity dari 0,2 digunakan, mengungkapkan gridline tersebut. Di keempat, tiga atribut gaya yang digunakan: stroke-color dan stroke-width untuk menarik perbatasan, dan fill-color untuk menentukan warna persegi panjang di dalam. Kolom paling kanan tambahan menggunakan stroke-opacity dan fill-opacity untuk memilih kekeruhan untuk perbatasan dan isi:
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ 'Tahun', 'kunjungan', {peran: 'gaya'}],
[ '2010', 10, 'warna: abu-abu'],
[ '2020', 14, 'color: # 76A7FA'],
[ '2030', 16, 'opacity: 0.2'],
[ '2040', 22, 'stroke color: # 703593; Stroke-width: 4; mengisi-color: # C5A5CF '],
[ '2050', 28, 'stroke color: # 871B47; Stroke-opacity: 0.6; Stroke-width: 8; mengisi-color: # BC5679; mengisi-opacity: 0.2 ']
]);
• KOLOM TABEL
Grafik memiliki beberapa jenis label, seperti label centang, label legenda, dan label dalam tooltips. Pada bagian ini, kita akan melihat bagaimana untuk menempatkan label dalam (atau dekat) kolom di bagan kolom. Katakanlah kita ingin membubuhi keterangan setiap kolom dengan simbol kimia yang sesuai. Kita dapat melakukannya dengan peran penjelasan:
Pada tabel data kami, kami mendefinisikan kolom baru dengan { role: 'annotation' } memegang label kolom kami:
Sementara pengguna dapat mengarahkan kursor ke kolom untuk melihat nilai-nilai data, Anda mungkin ingin menyertakan mereka pada kolom sendiri:
Ini adalah sedikit lebih rumit dari yang seharusnya, karena kita membuat DataView untuk menentukan penjelasan untuk masing-masing kolom.
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( "saat ini", {paket: [ 'corechart']});
google.charts.setOnLoadCallback (drawChart);
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ "Element", "Kepadatan", {peran: "gaya"}],
[ "Tembaga", 8.94, "# b87333"],
[ "Perak", 10,49, "silver"],
[ "Emas", 19.30, "emas"],
[ "Platinum", 21,45, "color: # e5e4e2"]
]);
lihat var = new google.visualization.DataView (data);
view.setColumns ([0, 1,
{Calc: "stringify",
sourceColumn: 1,
Jenis: "string",
Peran: "penjelasan"},
2]);
Pilihan var = {
title: "Kepadatan Logam Mulia, di g / cm ^ 3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
Legenda: {position: "none"},
};
var grafik = google.visualization.ColumnChart baru (document.getElementById ( "columnchart_values"));
chart.draw (lihat, opsi);
}
</ Script>
<Div id = "columnchart_values" style = "width: 900px; height: 300px;"> </ div>
Jika kita ingin memformat nilai berbeda, kita bisa mendefinisikan formatter dan membungkusnya dalam fungsi seperti ini:
berfungsi getValueAt (kolom, dataTable, baris) {
kembali dataTable.getFormattedValue (baris, kolom);
}
Kemudian kita bisa menyebutnya dengan calc: getValueAt.bind(undefined, 1) .
Jika label terlalu besar untuk muat seluruhnya di dalam kolom, itu ditampilkan di luar:
• GRAFIK KOLOM DITUMPUK
Sebuah grafik kolom ditumpuk adalah bagan kolom yang menempatkan nilai-nilai terkait atas satu sama lain. Jika ada nilai-nilai negatif, mereka ditumpuk dalam urutan terbalik di bawah baseline grafik ini. Ini biasanya digunakan ketika kategori alami terbagi menjadi komponen. Misalnya, pertimbangkan beberapa penjualan buku hipotetis, dibagi berdasarkan genre dan dibandingkan seluruh waktu:
Anda membuat bagan kolom ditumpuk dengan menetapkan isStacked pilihan untuk true :
Ditumpuk grafik kolom juga mendukung 100% susun, dimana tumpukan elemen pada setiap domain-nilai yang rescaled sehingga mereka menambahkan hingga 100%. Pilihan untuk ini isStacked: 'percent' , yang format setiap nilai sebagai persentase dari 100%, dan isStacked: 'relative' , yang format setiap nilai sebagai sebagian kecil dari 1. Ada juga isStacked: 'absolute' pilihan, yang secara fungsional setara dengan isStacked: true .
Catatan di ditumpuk grafik 100% di sebelah kanan, nilai-nilai tick didasarkan pada relatif 0-1 skala sebagai pecahan dari 1, tetapi nilai-nilai sumbu ditampilkan sebagai persentase. Hal ini karena kutu persentase sumbu adalah hasil dari menerapkan format "#. ##%" Dengan relatif 0-1 nilai skala. Bila menggunakan isStacked: 'percent' , pastikan untuk menentukan nilai-nilai kutu / axis menggunakan relatif skala 0-1.
• DITUMPUK
• 100% TUMPUKAN
• MEMBUAT MATERIAL KOLOM GRAFIK
Pada tahun 2014, Google mengumumkan pedoman dimaksudkan untuk mendukung tampilan umum dan merasa seluruh properti dan aplikasi (seperti aplikasi Android) yang berjalan di platform Google. Kami menyebutnya upaya ini Desain Material. Kami akan menyediakan "Material" versi dari semua grafik utama kami; Anda dipersilakan untuk menggunakan mereka jika Anda suka bagaimana mereka terlihat. Membuat Kolom Bagan Bahan ini mirip dengan menciptakan apa yang sekarang kita akan sebut "klasik" Kolom Chart. Anda memuat Google Visualisasi API (meskipun dengan 'bar' paket bukan 'corechart' paket), mendefinisikan DataTable Anda, dan kemudian membuat objek (tapi kelas google.charts.Bar bukan google.visualization.ColumnChart ). Sejak bar chart dan grafik kolom pada dasarnya identik tetapi untuk orientasi, kita sebut kedua Material Bar Charts, terlepas dari apakah bar vertikal (klasik, bagan kolom) atau horizontal (bar chart). Material, satu-satunya perbedaan adalah di bars pilihan. Bila diatur ke 'horizontal' , orientasi akan menyerupai tradisional klasik Bar Chart; jika tidak, bar akan vertikal.
Catatan: Charts Bahan tidak akan bekerja di versi lama dari Internet Explorer. (IE8 dan versi sebelumnya tidak mendukung SVG, yang Charts Material membutuhkan.)
Company Performance
Sales, Expenses,dan Profit:2014-2017
Charts bahan Kolom memiliki banyak perbaikan kecil lebih Charts Kolom klasik, termasuk palet warna ditingkatkan, bulat sudut, label format yang lebih jelas, jarak standar ketat antara seri, gridlines lebih lembut dan judul (dan penambahan sub judul).
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawChart);
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ 'Tahun', 'Penjualan', 'Beban', 'Laba'],
[ '2014', 1000, 400, 200],
[ '2015', 1170, 460, 250],
[ '2016', 660, 1120, 300],
[ '2017', 1030, 540, 350]
]);
Pilihan var = {
grafik: {
Judul: 'Kinerja Perusahaan,
subtitle: 'Penjualan, Biaya, dan Profit: 2014-2017',
}
};
var grafik = google.charts.Bar baru (document.getElementById ( 'columnchart_material'));
chart.draw (data, opsi);
}
</ Script>
</ Head>
<Body>
<Div id = "columnchart_material" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
Charts Material yang dalam versi beta. Penampilan dan interaktivitas sebagian besar akhir, tapi banyak dari pilihan yang tersedia di Charts Klasik belum tersedia di dalamnya. Anda dapat menemukan daftar pilihan yang belum didukung dalam masalah ini . Juga, pilihan cara dinyatakan tidak selesai, sehingga Anda harus mengkonversi pilihan Anda dengan mengganti baris ini: chart.draw(data, options); dengan ini:
chart.draw(data, google.charts.Bar.convertOptions(options));
Menggunakan google.charts.Bar.convertOptions() memungkinkan Anda untuk mengambil keuntungan dari fitur tertentu, seperti hAxis/vAxis.format pilihan preset.
• GRAFIK DUAL-Y
Catatan: sumbu Dual-Y tersedia hanya untuk grafik Material (yaitu, orang-orang dengan paket bar ).
Kadang-kadang Anda akan ingin menampilkan dua seri di bagan kolom, dengan dua independen Y-sumbu: sumbu tersisa untuk satu seri, dan sumbu yang tepat untuk yang lain:
Perhatikan bahwa tidak hanya kami dua y-sumbu berlabel berbeda ( "parsec" versus "magnitudo tampak") tetapi mereka masing-masing memiliki skala independen mereka sendiri dan gridlines. Jika Anda ingin menyesuaikan perilaku ini, gunakan vAxis.gridlines pilihan. Dalam kode di bawah ini, axes dan series pilihan bersama-sama menentukan penampilan dual-Y dari grafik. The series opsi menentukan sumbu yang digunakan untuk setiap ( 'distance' dan 'brightness' , mereka tidak perlu memiliki hubungan dengan nama kolom dalam DataTable). The axes pilihan kemudian membuat grafik ini grafik dual-Y, menempatkan 'distance' sumbu di sebelah kiri (berlabel "parsec") dan 'brightness' sumbu di sebelah kanan (berlabel "jelas besarnya").
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawStuff);
berfungsi drawStuff () {
Data var = google.visualization.arrayToDataTable baru ([
[ 'Galaxy', 'Jarak', 'Brightness'],
[ 'Canis Major Dwarf', 8000, 23,3],
[ 'Sagitarius Dwarf', 24000, 4.5],
[ 'Dwarf Ursa Major II', 30000, 14,3],
[ 'Lg. Magellanic Cloud ', 50000, 0,9],
[ 'Bootes I', 60000, 13,1]
]);
Pilihan var = {
width: 900,
grafik: {
Judul: 'galaksi Terdekat',
subtitle: 'jarak di sebelah kiri, kecerahan di sebelah kanan'
},
seri: {
0: {axis: 'jarak'}, // Ikat seri 0 sumbu bernama 'jarak'.
1: {axis: 'kecerahan'} // Ikat seri 1 ke sumbu bernama 'kecerahan'.
},
sumbu: {
y: {
Jarak: {label: 'parsec'}, // Kiri y-axis.
kecerahan: {sisi: 'kanan', label: 'magnitudo tampak'} // kanan y-axis.
}
}
};
var grafik = baru google.charts.Bar (document.getElementById ( 'dual_y_div'));
chart.draw (data, opsi);
};
</ Script>
</ Head>
<Body>
<Div id = "dual_y_div" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
• GRAFIK TOP-X
Catatan: sumbu Top-X hanya tersedia untuk grafik Material (yaitu, orang-orang dengan paket bar ).
Jika Anda ingin menempatkan label sumbu X dan judul di bagian atas grafik Anda daripada bagian bawah, Anda dapat melakukannya di tangga lagu Material dengan axes.x opsi:
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawStuff);
berfungsi drawStuff () {
Data var = google.visualization.arrayToDataTable baru ([
[ 'Pindah', 'Persentase'],
[ "Raja pion (e4)", 44],
[ "Ratu pion (d4)", 31],
[ "Knight ke King 3 (Nf3)", 12],
[ "Uskup pion Ratu (c4)", 10],
[ 'Lain', 3]
]);
Pilihan var = {
Judul: 'pembukaan Catur bergerak',
width: 900,
Legenda: {position: 'none'},
grafik: {subtitle: 'popularitas dengan persentase'},
sumbu: {
x: {
0: {sisi: 'top', label: 'White bergerak'} // Top x-axis.
}
},
bar: {groupWidth: "90%"}
};
var grafik = baru google.charts.Bar (document.getElementById ( 'top_x_div'));
// Mengkonversi pilihan klasik untuk pilihan Material.
chart.draw (data, google.charts.Bar.convertOptions (pilihan));
};
</ Script>
</ Head>
<Body>
<Div id = "top_x_div" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
Pemuatan
The google.charts.load nama paket adalah "corechart" .
google.charts.load ( "saat ini", {paket: [ "corechart"]}); Untuk Charts Kolom Material, google.charts.load nama paket adalah "bar" . (Tidak kesalahan ketik: Bahan Bar Chart menangani kedua orientasi.)
google.charts.load ( "saat ini", {paket: [ "bar"]}); Nama kelas visualisasi adalah google.visualization.ColumnChart .
var visualisasi = baru google.visualization.ColumnChart (kontainer); Untuk Charts Kolom Material, nama kelas visualisasi adalah google.charts.Bar . (Tidak kesalahan ketik: Bahan Bar Chart menangani kedua orientasi.)
var grafik = baru google.charts.Bar (kontainer); format data
Setiap baris di tabel mewakili sekelompok bar yang berdekatan.
Baris: Setiap baris di tabel mewakili sekelompok bar.
kolom:
Pilihan konfigurasi
COMBO CHARTS
Sebuah grafik yang memungkinkan Anda membuat setiap seri sebagai jenis yang berbeda penanda dari daftar berikut: garis, bidang, bar, lilin, dan daerah melangkah. Untuk menetapkan jenis penanda default untuk seri, tentukan seriesType properti. Gunakan series properti untuk menentukan sifat dari setiap seri individual.
Contoh
Pemuatan
The google.charts.load nama paket adalah "corechart"
Format Data
Baris: Setiap baris di tabel mewakili satu set titik data dengan lokasi sumbu x sama.
kolom:
• PILIHAN KONFIGURASI
Acara
Untuk informasi lebih lanjut tentang cara menggunakan peristiwa ini, lihat Dasar Interaktivitas , Penanganan Events , dan Firing Acara .
Kebijakan Data
Semua kode dan data diproses dan diberikan dalam browser. Tidak ada data yang dikirim ke server apapun.
DIFF CHART
Sebuah grafik diff adalah bagan yang dirancang untuk menyoroti perbedaan antara dua grafik dengan data pembanding. Dengan membuat perubahan antara nilai analog menonjol, mereka dapat mengungkapkan variasi antara dataset. Anda membuat grafik diff dengan memanggil computeDiff metode dengan dua dataset untuk menghasilkan dataset ketiga mewakili diff, dan kemudian menggambar itu. Grafik Diff tersedia untuk bar chart , grafik kolom , diagram lingkaran , dan grafik scatter .
Charts Diff sebar
Untuk menunjukkan grafik pencar diff, mari kita pertimbangkan sepasang percobaan, masing-masing membandingkan dua obat-obatan. Berikut adalah hasil dari dua percobaan, dan grafik diff yang dihasilkan:
Jika Anda bola mata dua grafik, Anda dapat memberitahu sesuatu telah berubah, tapi sulit untuk tahu persis apa. Grafik diff pencar membuat jelas dengan menunjukkan lintasan setiap titik data.
Berikut adalah garis utama menghasilkan tiga grafik di atas:
Anda dapat mengubah opacity dari ekor dengan diff.oldData.opacity pilihan, dan opacity dari titik data baru dengan diff.newData.opacity opsi:
var options = { diff: { oldData: { opacity: 1.0 } } };
var options = { diff: { newData: { opacity: 0.5 } } };
Charts Diff Pie
Berikut kode untuk menghasilkan tiga grafik:
Anda dapat mengontrol ukuran relatif dari lingkaran dengan diff.innerCircle.radiusFactor , perbatasan antara dua dengan diff.innerCircle.borderFactor , dan transparansi masing-masing dengan diff.oldData.opacity dan diff.newData.opacity . Akhirnya, Anda dapat membalikkan perilaku sehingga data tertua mengelilingi data terbaru dengan diff.oldData.inCenter . Contoh masing-masing:
Diff Bar dan Charts Kolom
Data diff bar dan grafik kolom diff overlay baru di atas data yang lebih tua. Di sini, kita mengambil dua grafik-sederhana kolom data lama, salah satu yang baru-dan diff mereka:
Untuk contoh yang lebih rumit, mari kita lihat bagaimana popularitas beberapa nama (khususnya, nama-nama magang Visualisasi musim panas Google) telah berubah dari tahun 1980-an hingga saat ini (nomor per jutaan bayi, courtesy of Wisaya Nama Bayi ) .
Kode untuk menghasilkan keempat grafik:
Diff kolom dan bar chart membiarkan Anda mengontrol lebar relatif dari bar lama dan baru dengan diff.newData.widthFactor opsi:
Langganan:
Postingan (Atom)