目次
円グラフのJSONを変数にしてみる
過去記事の円グラフ【Pie Chart】をベースに、JSONデータ部分を変数にしてみます。
Google Chartsサンプルソース
下記が、円グラフのサンプルをカスタマイズしたものをです。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// 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);
let strTitle = ["株式", "債券"];
let numPercent = [40, 60];
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table. データテーブルを作る
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
[strTitle[0], numPercent[0]],
[strTitle[1], numPercent[1]]
]);
// チャートのオプション設定
var options = {'title':'ポートフォリオ', // タイトル
//'pieHole': 0.4, // 円グラフをドーナツ型に指定
'width':600, // 描画領域の横幅
'height':480, // 描画領域の縦幅
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], // 色設定
is3D: true };
// いくつかのオプションで、インスタンスとチャートの描画
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>変数の宣言
今回は、円グラフPieChart で使いたいので、データテーブルに合わせたデータ構造と型にしていきます。
[[ラベル名, 数値], [ラベル名, 数値]...]“ラベル名”と、”パーセントの値”を変数に宣言します。
２行使うので配列にしています。
let strTitle = ["株式", "債券"];
let numPercent = [40, 60];addRowsでデータ追加
addRowsで、”ラベル名”と”パーセント”を追加していきます。
// Create the data table. データテーブルを作る
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
[strTitle[0], numPercent[0]],
[strTitle[1], numPercent[1]]
]);配列で宣言したので
| strTitle[0] | 文字列 | “株式” |
| numPercent[0] | 数値 | 40 |
| strTitle[1] | 文字列 | “株式” |
| numPercent[1] | 数値 | 60 |
データの数が増えてきたら、JSONデータを直接読み込んで型変換したり、ループ文で回した方が効率的ですが、いったんこれでテストできました。
まとめ
手軽にJavaScriptで豊富なグラフやチャート描画を選ぶことができる「Google Charts」で、JSONデータ型を扱う方法でした。
あわせて読みたい記事
あわせて読みたい書籍
リンク
リンク
リンク
リンク
