ブログの中でたまにレーダーチャートや棒グラフを使いたいなーというときって結構ありますよね。そんな時は画像よりも「 amCharts」を使い、javascriptで実装するのがおすすめ。修正や管理も簡単ですよ。
「amCharts」のグラフをブログに表示させる方法
「amChats」をブログに導入するのはとても簡単。今回ははてなブログにチャートを表示させる方法をご紹介します。
コードを記述する
「HTML編集」画面にし、記事の文中でグラフを挿入したい部分にResources→JavaScript→HTMLの順にコードを追加していきます。そして一旦保存したら、カスタマイズ→「デザインCSS」のモジュールを開き、CSSを追加します。
１、Resources
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/radar.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
２、JavaScript
（amChartから直接コピーして貼り付けるときは必ずコードを以下のように『<script type=”text/javascript”></script>』で閉じるようにしてください。）
<script type="text/javascript">// <![CDATA[
var chart = AmCharts.makeChart( "chartdiv", {
"type": "radar",
"theme": "light",
"dataProvider": [ { "country": "項目1", "litres": 156.9 },
{ "country": "項目2", "litres": 131.1 },
{ "country": "項目3", "litres": 115.8 },
{ "country": "項目4", "litres": 109.9 },
{ "country": "項目5", "litres": 108.3 },
{ "country": "項目6", "litres": 99 } ],
"valueAxes": [ { "axisTitleOffset": 20,
"minimum": 0, "axisAlpha": 0.15 } ],
"startDuration": 2,
"graphs": [ { "balloonText": "[[value]] litres of beer per year",
"bullet": "round", "valueField": "litres" } ],
"categoryField": "country",
"export": { "enabled": true } } );
// ]]></script>
３、HTML
<div id="chartdiv"></div>
この3つ追加すると、コードはこのようになっているはずです。
４、CSS
（上記の3つを追加したら一旦保存し、CSSは別途「デザインCSS」モジュールを開いて、その中に追加。）
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
コードを追加していき、「HTML編集」画面に戻ってプレビュー画面に切り替えると、以下のようなグラフが表示されるようになります。
項目と数値を変えればグラフを修正できますので、ちょっとしたグラフをブログの中に挿入したいときは便利ですね。
また、グラフの種類やデザインも豊富なので、記事のテーマによって変えることもでいるし、CSSをいじればグラフの色なんかも変更できるので、ブログに馴染むデザインにカスタマイズすることも可能。
amChartsで実装できるその他のグラフ
Simple Column Chart
Stacked Bar Chart
Date Based Data
Pie Chart With Legend
Bubble Chart
Animations along lines
公式ページにはこの外にもたくさんのグラフのデモページがありますので、導入したい方はぜひ一度ご覧ください。
