chart.jsとは
グラフ（折れ線グラフ、棒グラフ、レーダチャートなど）描画用のライブラリ。
ダウンロード：http://www.chartjs.org
ドキュメント：http://www.chartjs.org/docs
日本語ドキュメント：https://misc.0o0o.org/chartjs-doc-ja/
インストール
|
1 |
npm install chart.js --save |
使い方
|
1 |
<canvas id="myChart" width="400" height="400"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', // チャートのタイプ(棒グラフを指定) data: { labels: ["X軸タイトル１", "X軸タイトル２", "X軸タイトル３", "X軸タイトル４", "X軸タイトル５", "X軸タイトル６"], datasets: [{ label: 'Y軸タイトル', data: [12, 19, 3, 5, 2, 3], // グラフにするデータ backgroundColor: [ // グラフの背景色(dataのインデックスに対応) 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ // グラフの線の色(dataのインデックスに対応) 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 // 線の幅 }] }, options: { scales: { yAxes: [{ ticks: { max: 100 // Y軸の最大値指定 min: 0 // Y軸の最小値指定 } }] } } }); |
チャートのデータ更新
|
1 2 3 4 5 6 |
function updateDatasets(chart, data, datasetIndex) { // datasetsのインデックス指定して代入 chart.data.datasets[datasetIndex].data = data; // 最後にチャートの更新を呼ぶ chart.update(); } |
チャートのオプション更新
|
1 2 3 4 5 6 |
function updateOption(chart, someValue) { // 更新したいプロパティに値を代入 chart.options.scales.yAxes[0].ticks.min = someValue; // 最後にチャートの更新を呼ぶ myChart.update(); } |
グローバル設定
|
1 2 3 4 |
// チャートのフォントの色 Chart.defaults.global.defaultFontColor = 'white'; // チャートのフォントのサイズ Chart.defaults.global.defaultFontSize = 15; |
オプション
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
options: { responsive: true, // レスポンシブ maintainAspectRatio: false, // 画面サイズに合わせて縦横比を変更 hoverMode: 'index', spanGaps: false, // trueでnullデータ補完 animation: { // アニメーションの設定 duration: 500 }, legend: { display: false, // 凡例を消す }, title: { // タイトルの設定 display: false, }, gridLines: { // グリッド線の設定 display: false, color: 'rgba(255,255,255,0.3)', }, scales: { yAxes: [ // Y軸の設定 { type: 'linear', // チャートの種類 display: true, position: 'left', // Y軸の位置(左右) id: 'y-axis-1', // Y軸のID scaleLabel: { // Y軸ラベルの設定 display: true, labelString: '非表示', fontSize: 16, fontColor: '#ffffff' }, ticks: { // 目盛の設定 min: 0, // Y軸の最大値 max: 100, // Y軸の最小値 beginAtZero: true }, gridLines: { drawOnChartArea: false, // 目盛りを消す color: '#6a6a6a', }, }, { type: 'linear', display: true, position: 'right', id: 'y-axis-2', borderDash: [5, 5], scaleLabel: { display: true, labelString: '非表示', fontSize: 16, fontColor: '#ffffff' }, ticks: { // 目盛の設定 min: 0, max: 100, beginAtZero: true }, gridLines: { // drawOnChartArea: false, // 目盛りを消す color: '#6a6a6a', }, } ], xAxes: [ // X軸の設定 { display: true, type: 'time', time: { unit: 'minute', displayFormats: { 'minute': 'MM:DD HH:mm', // X軸の数値のフォーマット } }, gridLines: { color: '#6a6a6a', }, ticks: { // 目盛の設定 autoSkip: true, maxRotation: 45, // X軸に表示するテキストの角度 source: 'auto', beginAtZero: true, callback: function (value, index, values) { // X軸に表示する値を返す return value; } }, } ] }, tooltips: { // ポイントにカーソルを当てた時に表示するツールチップの設定 custom: function (tooltipModel) { if (tooltipModel.dataPoints && String(tooltipModel.dataPoints[0].yLabel).length > 8) { tooltipModel.opacity = 0; } return tooltipModel; }, callbacks: { title: function (tooltipItems, data) { // タイトルのコールバック }, label: function (tooltipItem, data) { // ラベルのコールバック }, } }, hover: { // マウスオーバーの設定 mode: 'nearest' }, }, |
使ってみた感想
チャートの設定が豊富でとても使いやすいライブラリだと思いました。
optionsなどを駆使すれば自分なりのアレンジもできると思います。