■ Google Charts
* 商用利用 * JavaScriptで記述する => グラフ自体はSVG形式（Scalable Vector Graphics）で記述される
■ サンプル
https://developers.google.com/chart/interactive/docs/quick_start<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>Demo for Google Charts</title> </head> <body> <div id="targetChart"> </div> <!--Load the AJAX API--> <script type="text/javascript" src="">https://www.gstatic.com/charts/loader.js"> <script type="text/javascript"> (function() { 'use strict'; // Load the Visualization API and the corechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and draws it. function drawChart() { // Set chart options var options = { 'title': 'Demo for Pie Chart', 'width': 400, 'height':300 }; // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Language'); data.addColumn('number', 'Votes'); data.addRows([ ['Java', 47], ['C', 21], ['PHP', 15], ['Ruby', 10], ['Python', 8] ]); // Instantiate and draw our chart, passing in some options. var target = document.getElementById('targetChart'); var chart = new google.visualization.PieChart(target); chart.draw(data, options); } })(); </script> </body> </html>
■ 補足
【１】オプション について
公式サイトの「Configuration options」を参照するhttps://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options
// Set chart options
var options = {
'title': 'Demo for Pie Chart',
'width': 400,
'height':300,
backgroundColor: '#f8f8f8',
colors: ['red', 'blue', 'yellow', 'green', 'gray'],
// slices: 一部を切り出して目立たさせる
// + 第一引数：どこを切り出すか（0番目から。「2」「3」だと「PHP」「Ruby」）
// + offset：どの位で切り出すか
slices: {2: {offset: 0.4}, 3: {offset: 0.2}},
// pieHole: 0.4, // is3Dとは一緒に使えない
is3D: true
};
【２】データを配列で追加
google.visualization.arrayToDataTableを使う// Create the data table. var data = new google.visualization.arrayToDataTable([ ['Language', 'Votes'], ['Java', 47], ['C#', 37], ['C', 21], ['PHP', 15], ['Ruby', 10], ['Python', 8] ]);
【３】Googleスプレッドシートを使う
Googleスプレッドシート/データ (共有するためのURLを取得しておく)Language Votes Java 67 C 21 PHP 15 Ruby 10 Python 8サンプル
<!--Load the AJAX API--> <script type="text/javascript" src="">https://www.gstatic.com/charts/loader.js"> <script type="text/javascript"> (function() { 'use strict'; // Load the Visualization API and the corechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and draws it. function drawChart() { var sharedUrl = 'https://docs.google.com/spreadsheets/x/xxxxxxxxxxxxxxxxxxxx_xxxxxx/edit?usp=sharing'; var query = new google.visualization.Query(sharedUrl); query.send(handleQueryResponse); } function handleQueryResponse(response) { // Set chart options var options = { 'title': 'Demo for Pie Chart', 'width': 400, 'height': 300 }; // Create the data table. var data = response.getDataTable(); // Instantiate and draw our chart, passing in some options. var target = document.getElementById('targetChart'); var chart = new google.visualization.PieChart(target); chart.draw(data, options); } })(); </script>
