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

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

SPONSORED LINK


「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をいじればグラフの色なんかも変更できるので、ブログに馴染むデザインにカスタマイズすることも可能。

SPONSORED LINK

 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

SPONSORED LINK

あわせて読みたい