読者です 読者をやめる 読者になる 読者になる

よなかのはなし

http://www.hiroseyonaka.com/

はてなブログにグラフを表示させる便利なJavaScript、「amCharts」の実装方法

f:id:hiroseyonaka:20160218192815p:plain

ブログの中でたまにレーダーチャートや棒グラフを使いたいなーというときって結構ありますよね。そんな時は画像よりも「 amCharts」を使い、javascriptで実装するのがおすすめ。修正や管理も簡単ですよ。

「amCharts」のグラフをブログに表示させる方法

 「amChats」をブログに導入するのはとても簡単。今回ははてなブログにチャートを表示させる方法をご紹介します。

 

コードを記述する

「HTML編集」画面にし、記事の文中でグラフを挿入したい部分にResources→JavaScript→HTMLの順にコードを追加していきます。そして一旦保存したら、カスタマイズ→「デザインCSS」のモジュールを開き、CSSを追加します。

 

1、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>

 

2、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>

 

3、HTML

 

<div id="chartdiv"></div>

 

この3つ追加すると、コードはこのようになっているはずです。

 

f:id:hiroseyonaka:20160125132039p:plain

 

4、CSS

(上記の3つを追加したら一旦保存し、CSSは別途「デザインCSS」モジュールを開いて、その中に追加。)

 

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}	

 

コードを追加していき、「HTML編集」画面に戻ってプレビュー画面に切り替えると、以下のようなグラフが表示されるようになります。

 

f:id:hiroseyonaka:20160219131428p:plain

 

項目と数値を変えればグラフを修正できますので、ちょっとしたグラフをブログの中に挿入したいときは便利ですね。

また、グラフの種類やデザインも豊富なので、記事のテーマによって変えることもでいるし、CSSをいじればグラフの色なんかも変更できるので、ブログに馴染むデザインにカスタマイズすることも可能。

 

 amChartsで実装できるその他のグラフ

Simple Column Chart

f:id:hiroseyonaka:20160218192611p:plain

 

Stacked Bar Chart

f:id:hiroseyonaka:20160218192718p:plain

 

Date Based Data

 

f:id:hiroseyonaka:20160218192711p:plain

 

Pie Chart With Legend

 

f:id:hiroseyonaka:20160218192503p:plain

 

Bubble Chart

 

f:id:hiroseyonaka:20160218192536p:plain

 

Animations along lines

 

f:id:hiroseyonaka:20160218192520p:plain

 

 

公式ページにはこの外にもたくさんのグラフのデモページがありますので、導入したい方はぜひ一度ご覧ください。

JavaScript Charts and Maps | amCharts