Chart.jsにはたくさんのパラメータがあります。
なかなか覚えられないので、data と optionをまとめてみました。
随時更新していく予定です。
data
JavaScript
data: {
labels:
datasets: [{
label: 'String' //legend
data: array //グラフのデータ
backgroundColor: //背景色
hoverBackgroundColor: //背景色(ホバー)
borderColor:
borderWidth: 1, //枠線の太さ
hoverBorderColor: //枠線の色(ホバー)
pointBackgroundColor: //結合点の背景色
pointBorderColor: //結合点の枠線の色
pointHoverBackgroundColor: //結合点の背景色(ホバー)
pointHoverBorderColor: //結合点の枠線の色(ホバー)
pointRadius: 0, //結合点のサイズ
pointHoverRadius: 4, //結合点のサイズ(ホバー)
pointHitRadius: 15, //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
lineTention: 0, //lineグラフ線のカーブ
fill: false, //面の非表示
}]
}
Options
JavaScript
options: {
responsive: true,
legend: {
display: false, //legendの非表示
position: 'top' //legendのポジション('top', 'left', 'bottom', 'right')
},
tooltips: {
enabled: false, //Tooltipの非表示
},
scale: {
reverse: true //数字を逆向き
},
hover: { //ホバーの設定
mode: 'single' //ホバー時の動作(single, label, dataset)
},
animation: { //アニメーションの設定
animateRotate: false //アニメーションの有無
},
scales: { //軸の設定
yAxes: [{ //Y軸の設定
ticks: { //目盛りの設定
beginAtZero: true, //開始値を0
min: 0, //最小値
max: 1000 //最大値
},
scaleLabel: {
display: true, //Y軸ラベルの表示
labelString: 'String' //ラベル名
}
}]
},
layout: { //レイアウトの設定
padding: {
left: 50,
right: 0,
top: 0,
bottom: 0
}
}
}