以前から便利に使っていたChartjsライブラリだが、実際に仕事で使うときに、リファレンスを見直すことが多い。
そして、細かな設定に関しては、それぞれのユーザーが個人で書いているブログがググってヒットするケースが非常に多い。
リファレンスはとにかくボリュームがありすぎるので、確かに事例集の方が役に立つ。
という事で、僕も実際に仕事で使った設定サンプルをブログに掲載しておくことにしたので、少しでも困った人の参考になれば幸いです。
ちなみに、前回記事も参考にしてくださいね。
[Chart.js] 積み上げ折れ線グラフの実装
ソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chartjs - sample</title>
<script src="chartjs/dist/Chart.bundle.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
new Chart(document.getElementById("canvas") , {
type : "bar",
data : {
labels : [
"2013",
"2014",
"2015",
"2016",
"2017"
],
datasets : [
{
type : "bar",
yAxisID : "bar",
label : "金融機関",
data : [
17,
115,
120,
117,
119
],
backgroundColor : [
"rgba(172 , 155 , 209 , 0.5)",
"rgba(172 , 155 , 209 , 0.5)",
"rgba(172 , 155 , 209 , 0.5)",
"rgba(172 , 155 , 209 , 0.5)",
"rgba(172 , 155 , 209 , 0.5)"
],
pointBackgroundColor : [
"rgba(172 , 155 , 209 , 0.5)",
"rgba(172 , 155 , 209 , 0.5)",
"rgba(172 , 155 , 209 , 0.5)",
"rgba(172 , 155 , 209 , 0.5)",
"rgba(172 , 155 , 209 , 0.5)"
],
pointBorderColor : "rgba(120 , 120 , 120 , 0.8)",
borderColor : "rgba(120 , 120 , 120 , 0.8)",
borderWidth : 1,
lineTension : 0,
stack : 1,
fill : "-1"
},
{
type : "bar",
yAxisID : "bar",
label : "金融商品取引業者",
data : [
129,
158,
161,
122,
137
],
backgroundColor : [
"rgba(125 , 171 , 202 , 0.5)",
"rgba(125 , 171 , 202 , 0.5)",
"rgba(125 , 171 , 202 , 0.5)",
"rgba(125 , 171 , 202 , 0.5)",
"rgba(125 , 171 , 202 , 0.5)"
],
pointBackgroundColor : [
"rgba(125 , 171 , 202 , 0.5)",
"rgba(125 , 171 , 202 , 0.5)",
"rgba(125 , 171 , 202 , 0.5)",
"rgba(125 , 171 , 202 , 0.5)",
"rgba(125 , 171 , 202 , 0.5)"
],
pointBorderColor : "rgba(120 , 120 , 120 , 0.8)",
borderColor : "rgba(120 , 120 , 120 , 0.8)",
borderWidth : 1,
lineTension : 0,
stack : 1,
fill : "-1"
},
{
type : "bar",
yAxisID : "bar",
label : "その他の法人",
data : [
241,
239,
196,
122,
100
],
backgroundColor : [
"rgba(184 , 48 , 179 , 0.5)",
"rgba(184 , 48 , 179 , 0.5)",
"rgba(184 , 48 , 179 , 0.5)",
"rgba(184 , 48 , 179 , 0.5)",
"rgba(184 , 48 , 179 , 0.5)"
],
pointBackgroundColor : [
"rgba(184 , 48 , 179 , 0.5)",
"rgba(184 , 48 , 179 , 0.5)",
"rgba(184 , 48 , 179 , 0.5)",
"rgba(184 , 48 , 179 , 0.5)",
"rgba(184 , 48 , 179 , 0.5)"
],
pointBorderColor : "rgba(120 , 120 , 120 , 0.8)",
borderColor : "rgba(120 , 120 , 120 , 0.8)",
borderWidth : 1,
lineTension : 0,
stack : 1,
fill : "-1"
},
{
type : "bar",
yAxisID : "bar",
label : "外国法人等-個人以外",
data : [
66,
309,
399,
469,
518
],
backgroundColor : [
"rgba(222 , 133 , 176 , 0.5)",
"rgba(222 , 133 , 176 , 0.5)",
"rgba(222 , 133 , 176 , 0.5)",
"rgba(222 , 133 , 176 , 0.5)",
"rgba(222 , 133 , 176 , 0.5)"
],
pointBackgroundColor : [
"rgba(222 , 133 , 176 , 0.5)",
"rgba(222 , 133 , 176 , 0.5)",
"rgba(222 , 133 , 176 , 0.5)",
"rgba(222 , 133 , 176 , 0.5)",
"rgba(222 , 133 , 176 , 0.5)"
],
pointBorderColor : "rgba(120 , 120 , 120 , 0.8)",
borderColor : "rgba(120 , 120 , 120 , 0.8)",
borderWidth : 1,
lineTension : 0,
stack : 1,
fill : "-1"
},
{
type : "bar",
yAxisID : "bar",
label : "外国法人等-個人",
data : [
134,
170,
156,
132,
138
],
backgroundColor : [
"rgba(255 , 220 , 80 , 0.5)",
"rgba(255 , 220 , 80 , 0.5)",
"rgba(255 , 220 , 80 , 0.5)",
"rgba(255 , 220 , 80 , 0.5)",
"rgba(255 , 220 , 80 , 0.5)"
],
pointBackgroundColor : [
"rgba(255 , 220 , 80 , 0.5)",
"rgba(255 , 220 , 80 , 0.5)",
"rgba(255 , 220 , 80 , 0.5)",
"rgba(255 , 220 , 80 , 0.5)",
"rgba(255 , 220 , 80 , 0.5)"
],
pointBorderColor : "rgba(120 , 120 , 120 , 0.8)",
borderColor : "rgba(120 , 120 , 120 , 0.8)",
borderWidth : 1,
lineTension : 0,
stack : 1,
fill : "-1"
},
{
type : "line",
yAxisID : "line",
label : "個人その他",
data : [
15297,
33831,
31351,
16771,
11187
],
backgroundColor : [
"rgba(128 , 192 , 256 , 0.8)",
"rgba(128 , 192 , 256 , 0.8)",
"rgba(128 , 192 , 256 , 0.8)",
"rgba(128 , 192 , 256 , 0.8)",
"rgba(128 , 192 , 256 , 0.8)"
],
pointBackgroundColor : [
"rgba(128 , 192 , 256 , 0.8)",
"rgba(128 , 192 , 256 , 0.8)",
"rgba(128 , 192 , 256 , 0.8)",
"rgba(128 , 192 , 256 , 0.8)",
"rgba(128 , 192 , 256 , 0.8)"
],
pointBorderColor : "rgba(120 , 120 , 120 , 0.8)",
borderColor : "rgba(120 , 120 , 120 , 0.8)",
borderWidth : 1,
lineTension : 0,
stack : 1,
fill : "-1"
}
]
},
options : {
tooltips : {
mode : 'nearest',
intersect : false,
callbacks : {}
},
scales : {
yAxes : [
{
id : "bar",
position: "left",
ticks : {
beginAtZero : true
},
stacked : true,
scaleLabel : {
display : true, //表示設定
labelString : "unit-1", //ラベル
fontSize : 12 //フォントサイズ
}
},
{
id : "line",
position: "right",
ticks : {
beginAtZero : true
},
gridLines: {
drawOnChartArea: false,
},
stacked : true,
scaleLabel : {
display : true, //表示設定
labelString : "unit-2", //ラベル
fontSize : 12 //フォントサイズ
}
}
]
},
plugins : {
filler : {
propagate : true
}
}
}
});
</script>
</body>
</html>
解説
chartjsは、本家からダウンロードして設置してくださいね。
<script src="chartjs/dist/Chart.bundle.min.js"></script>
この１行で実装できてしまうので、非常に楽です。
今回のチャートのポイントは、棒グラフと折れ線グラフの同居している点と、それぞれに見出しをつけているという事です。
まず、複数のグラフを実装する時は、datasetのそれぞれの値の中で、"type"と"yAxisID"を付け加えるのがポイントです。
"yAxisID"の値はその後にセットする、"options-scales-yAxes"内にid値をつける事でリンクさせられます。
注意点としては、全体的なグローバルのセットにtypeをつけ忘れるとエラーが出ます。
デフォルトとして設置してあげましょう。
次に見出しですが、それぞれ一番左と右に縦書きで表示されているのが見出しです。
"scaleLabel"という値をつける事で、表示する事ができるようになります。
これは、高額な金額表示の際に、千円や百万という桁を削除するような表示のときに使うのが便利です。
もうひとつ全体的な注意点として、左右それぞれ異なる値でのグラフ表示のため、グラフ内の罫線はどちらか一つだけ表示したほうが、見た目がよくなるという点です。
非表示にする場合は、"gridLines"の箇所を付け加えるだけなので、かなり簡単です。
そして、ついでに記述しておきますが、便利機能として、tooltipに"mode : 'nearest'"を付け加えておくと、画面上に表示するtooltipが、マウスの一番近い座標をピックアップしてくれるので、点などの細かなポインティングで行うよりは操作性がよくなります。
コピペして、お試しあれ。
0 件のコメント:
コメントを投稿