ブログにかっちょいいグラフを張り付ける

執筆日時:

去年 Amazonで使った金額を計算してみた。 - だるろぐ でグラフを張り付けようと思ったのだけど、「Excel」で作って画像として貼り付けるよりも、Google ChartCharts  |  Google Developers で張り付けた方がカッコイイっぽいことに気付いた。

f:id:daruyanagi:20150105162759p:plain

最近は Material Charts と呼ばれる SVG で実装されたリッチなグラフが書けるようになっている(そのため、古い Internet Explorer では表示できないので注意)。たとえば、グラフにマウスオーバーすると数値が表示されたり。かっちょいい。ただし、ベータ版であることには留意しておこう。

コード

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);

function drawChart() { var data = google.visualization.arrayToDataTable([ [‘Year’, ‘合計金額’], [‘2006’, 71180 ], [‘2007’, 283066 ], [‘2008’, 66638 ], [‘2009’, 35289 ], [‘2010’, 93949 ], [‘2010’, 93949 ], [‘2011’, 258747 ], [‘2012’, 277831 ], [‘2013’, 186103 ], [‘2014’, 258747 ], ]);

var options = { chart: { title: ‘Amazon 年間消費金額’, subtitle: ‘2006-2014’, } };

var chart = new google.charts.Bar(document.getElementById(‘chart_div’)); chart.draw(data, options); } </script> <div id="chart_div" style="width: 540px; height: 360px;"></div>

詳しい使い方は Visualization: Column Chart  |  Charts  |  Google Developers で。円グラフとかも今度試してみようかな。

結果

マウスオーバーしてみるといいやで。