はじめに
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。
それらを組み合わせた混合チャートも可能です。
Chart.js(公式サイト)
Chart.js ドキュメント
この記事は 棒グラフ と 折れ線グラフ を使った複合グラフの使い方です。
チャートの設定方法
- type:描画するグラフの種類
- data:ラベルとデータセット
- options:オプション設定
グラフの種類は「type」で指定します。
それぞれの詳細な使い方記事は、以下の表内リンクから。
それ以外は左側のリンクからご覧ください。
表示サンプル | type | 設定方法 | |
---|---|---|---|
一般 | Cocoon | ||
radar | レーダーチャート | ||
詳細 | 詳細 | ||
line | 折れ線グラフ | ||
詳細 | 詳細 | ||
bar | 棒グラフ | ||
詳細 | 詳細 | ||
pie | 円グラフ | ||
詳細 | 詳細 | ||
polarArea | ポーラーチャート | ||
詳細 | 詳細 | ||
doughnut | ドーナツチャート | ||
詳細 | 詳細 | ||
bar、line | 複合グラフ | ||
詳細 | 詳細 | ||
scatter | 散布図 | ||
bubble | バブルチャート |
混合グラフ
今回は、混合グラフ ですが、棒グラフと折れ線グラフを使うのでtype: ‘bar’ と type: ‘line’ の複合実装方法です。
コピペで使って頂けるようにコードを紹介します。
手順
- STEP1JS読み込みChart.jsを読み込むコードを記述(1行のみ)
- STEP2コード編集JavaScriptを記述(データやデザイン設定)
- STEP3表示コードHTMLを記述(1行のみのグラフ表示用タグ)
Chart.jsを読み込む
サイト内の色々なページでグラフ表示する
特定のページのみでしか利用しない場合
埋め込みコードを記載します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
jsファイルを特定記事のみで読み込ませたい場合などは以下を参考にして下さい。
JavaScriptを記述
注意点
コードを表示
<script>
var ctx = document.getElementById("myMixChart");
var myMixChart = new Chart(ctx, {
type: 'bar',
data: {
//データ項目のラベル
labels: ['1月', '2月', '3月', '4月', '5月'],
datasets: [{
//棒グラフ
label: "訪問者数", //データ項目のラベル
data: [120,140,180,150,210], //グラフのデータ
backgroundColor: "rgba(200,112,126,0.5)",
yAxisID: 'left-y-axis' //左の縦軸に表示
}, {
//折れ線グラフ
label: "PV数", //データ項目のラベル
type: 'line',
data: [190,230,380,320,480], //グラフのデータ
borderColor: "rgba(80,126,164,1)",
backgroundColor: "rgba(0,0,0,0)",
yAxisID: 'right-y-axis' //右の縦軸に表示
}]
},
options: {
title: {
display: true,
//グラフタイトル
text: 'Aサイト分析'
},
scales: {
yAxes: [
{
//左軸の設定
id: 'left-y-axis',
position: 'left',
ticks: {
suggestedMax: 300, //最大値
suggestedMin: 0, //最小値
stepSize: 50, //縦ラベルの数値単位
callback: function(value, index, values){
return value + '人' //単位
}
}
}, {
//右軸の設定
id: 'right-y-axis',
position: 'right',
ticks: {
suggestedMax: 500, //最大値
suggestedMin: 0, //最小値
stepSize: 100, //縦ラベルの数値単位
callback: function(value, index, values){
return value + 'PV' //単位
}
},
}
]
}
}
});
</script>
簡単解説
chart.js (混合グラフ)解説 ※外部リンク
chart.js Line(折れ線グラフ)解説 ※外部リンク
chart.js Bar(棒グラフ)解説 ※外部リンク
1行目で記述している「myMixChart」は、任意の名称です。
同一ページ内に複数のグラフを表示する際には、この名称をそれぞれに設定します。
例:棒グラフを2つ表示
myBarChart1
myBarChart2
データ項目ラベル
//データ項目のラベル
labels: ['1月', '2月', '3月', '4月', '5月'],]
設定した項目は、グラフ下部に設定順に左側から表示されます。
項目数はいくつでもOKです。増やした場合は、データ内容も同数にする事をお忘れなく!
チャートの対象ラベル
label: '訪問者数', //データ項目のラベル
・・
label: 'PV数', //データ項目のラベル
色分けしたバーの項目名を表示するラベルです。
1つしか表示しない場合(サンプルであれば、たとえば「訪問者数」のみのグラフ)は、要らない気もしますが、何も設定をしなくても四角い枠は出てしまうので、何かしら設定した方が良さそう。
色の設定について
それぞれの色指定は、透過割合を指定出来るRGBAで指定しています。
もちろん透過が必要なければ16進コードでの指定も可能。
RGBAについては以下をご覧ください。
グラフデータ
実際の数値を設定します。
data: [120,140,180,150,210], //グラフのデータ
・・
data: [190,230,380,320,480], //グラフのデータ
オプション
グラフ上に表示するテキスト(グラフタイトル)と、左右軸それぞれのチャートの最小値、最大値、単位を設定します。
.[options: {
title: {
display: true,
//グラフタイトル
text: 'Aサイト分析'
},
scales: {
yAxes: [
{
//左軸の設定
id: 'left-y-axis',
position: 'left',
ticks: {
suggestedMax: 300, //最大値
suggestedMin: 0, //最小値
stepSize: 50, //縦ラベルの数値単位
callback: function(value, index, values){
return value + '人' //単位
}
}
}, {
//右軸の設定
id: 'right-y-axis',
position: 'right',
ticks: {
suggestedMax: 500, //最大値
suggestedMin: 0, //最小値
stepSize: 100, //縦ラベルの数値単位
callback: function(value, index, values){
return value + 'PV' //単位
}
},
}
]
}
}]
HTMLを記述
<canvas id="myMixChart">
</canvas>
注意点
表示する為のHTMLはこれだけですが、上記コードのように、
WordPressの場合、タグのみの行はビジュアルエディタとテキストエディタを行き来するだけで消えてしまうのを防ぐ為です。
何かしらの文字を入れれば消えませんが、今回は文字の必要がない為、一番楽な「改行」で対応しています。
以上で完了です。
グラフが表示されない時
記述したJavaScriptとHTMLを見直して下さい。
JavaScript
1~2行目
var ctx = document.getElementById(“myBarChart“);
var myBarChart= new Chart(ctx, {
HTML
<canvas id=”myBarChart“>
上記の解説にも書きましたが、複数のグラフを同一ページ内で表示する場合は、名称を変える必要がありますのでご注意下さい。
例:棒グラフを2つ表示
myBarChart1
myBarChart2
JavaScript、HTMLのそれぞれに対応して名称が間違えていないか確認。
コメント