ワードプレスプラグイン「amCharts」を使って簡単に円グラフを作るやり方を解説していきます。

本格的なグラフを使いたい方には「amCharts」をオススメします。

非常に便利なのですが操作が難しいためこの記事をぜひ参考にしてくださいね。

amchartsをインストール

ワードプレスの「新規プラグイン」画面で、検索ボックスの中に「amcharts」と入力し、下の画像を参考にしながら、「有効化」してください。

ライセンスに関して

amchartsに直接問い合わせをした方によると、

「amchartsへのリンクを消さない限り、無料利用可能」とのこと。

商業利用を検討されている方は、しっかりとライセンス契約を結ぶべきですが、商業利用されない方は無料で使っていけばいいでしょう。

これだけのサービスを無料で使える!ってすごいですね。

画面説明

コピペで使える:円グラフ

最も使われているグラフといえば円グラフです。

実際にamchartsを使って作ってみました。

編集画面では以下のようにコピペするとそのままこのグラフを再現できますよ。

[Resources]
//www.amcharts.com/lib/4/core.js
//www.amcharts.com/lib/4/charts.js

<HTML>

<div id="$CHART$" style="width: 100%; height: 400px;"></div>

[JavaScript]// Create chart instance
var chart = am4core.create(“$CHART$”, am4charts.PieChart);

// Make the chart fade-in on init
chart.hiddenState.properties.opacity = 0;

// Set data
chart.data = [{
“country”: “Lithuania”,
“litres”: 501.9
}, {
“country”: “Czech Republic”,
“litres”: 301.9
}, {
“country”: “Ireland”,
“litres”: 201.1
}, {
“country”: “Germany”,
“litres”: 165.8
}, {
“country”: “Australia”,
“litres”: 139.9
}, {
“country”: “Austria”,
“litres”: 128.3
}, {
“country”: “UK”,
“litres”: 99
}, {
“country”: “Belgium”,
“litres”: 60
}, {
“country”: “The Netherlands”,
“litres”: 50
}];

// Add series
var series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = “litres”;
series.dataFields.category = “country”;

// Create initial animation
series.hiddenState.properties.opacity = 1;
series.hiddenState.properties.endAngle = -90;
series.hiddenState.properties.startAngle = -90;

// Add legend
chart.legend = new am4charts.Legend();[/JavaScript]

”country”、”litres”の部分を適宜変えてください。そうすればあなたが表示させたいデータによって円グラフを変えることができます。

The following two tabs change content below.

松本 達弘

「全国の落ちこぼれたちのスターになりたい」中学3年時の国語偏差値28英語偏差値32。平成。早稲田大学卒業(高校中退→大検→大学入学) 早大在学中にWebサイトを軸に起業。現在はウェブマーケティングを武器に会社経営中。