vue-chart.jsのLine(折れ線グラフ)を使用した際の設定をメモ書き
chart.jsでもデータの設定部分は、ほぼ変わらないはず。
Javascript
//グラフに描画される線の設定
chartData = {
labels: [1960,1965,1970,....], //x軸の値
datasets: [ //グラフに描画される情報
{ //線一本分
label: 'カナダ', //凡例に表示される各折れ線を示す名称
data: [10,20,30,10,....], //実際の値
fill: false, //線の下部塗りつぶすかどうか
backgroundColor: '#FFFFFF', //線の下部の色と凡例の枠内の色
borderColor: '#FFFFFF', //線の色
pointBackgroundColor: '#FFFFFF', //点の色
lineTension: 0,
pointHitRadius: 15 //マウスホバーの認識範囲
},
{
//他の線
.
.
.
},
],
}
Javascript
//グラフの設定
options = {
title: {
//見出し
display: true,
text: "折れ線グラフ",
padding: 1,
fontSize: 18
},
scales: {
yAxes: [
//y軸
{
ticks: {
//軸のメモリ
beginAtZero: true //0から始まる
},
gridLines: {
//y軸の網線
display: false //表示するか否か
},
scaleLabel: {
//表示されるy軸の名称について
display: true, //表示するか否か
labelString: "万人",
fontSize: 15
}
}
],
xAxes: [
//x軸
{
ticks: {
autoSkip: false, //横幅が狭くなったときに表示を間引くか否か
maxRotation: 90, //下のと合わせて表示される角度を決める
minRoation: 90 //横幅を最小にしたときに縦に表示される
},
gridLines: {
//x軸の網線
display: false
},
scaleLabel: {
//表示されるx軸の名称について
display: true,
labelString: "Year",
fontSize: 15
}
}
]
},
legend: {
//凡例
display: true,
position: "right", //どこに表示するか
labels: { fontSize: 15 }
},
responsive: true,
maintainAspectRatio: false, //元のcanvasのサイズを保つか否か
spanGaps: false, //値が抜け落ちていた時、埋めるか否か
elements: {
line: {
//折れ線グラフの全ての線に適用される設定。
//個別に設定する場合はdatasets内でlineTension:'任意の数字'で設定
tension: 0,
fill: false
}
},
tooltips: {
mode: "point",
intersect: false //modeがpointのときは違いは、なし？
},
animation: {
// 線の出方
duration: 0, //0にするとパフォーマンス良し
easing: "" // アニメーションの緩急 https://easings.net/が詳しい
},
hover: {
// ホバーした際のツールチップなどの出方に関わる
animationDuration: 0 //0にするとパフォーマンス良し
},
//レスポンシブ中のアニメーション、0にするとパフォーマンス良し
responsiveAnimationDuration: 0
}
設定項目の数が多いので、
細かくいじろうとするとちょっと体力がいる。