折れ線グラフ、棒グラフ、レーダーチャート、ドーナツチャート、円グラフ、ポーラチャート、バブルチャート、散布図等のチャートをWebサイトに簡単に追加することができます。
Table of Contents
公式サイト
https://www.chartjs.org/docs/latest/
コードサンプル
折れ線グラフ
<html>
<head>
<title>Chart.js Sample</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script>
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};
const config = {
type: 'line',
data: data,
options: {}
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, config);
</script>
</body>
</html>
CDN
ここではCDNを使用してchart.jsを読み込んでいます。
以下のコードでchart.jsが使用可能になります。
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
チャートを描画するCanvasを用意
canvas要素にチャートを描画するため、canvas要素を用意し、IDに任意の値を指定しておきます。
<div>
<canvas id="myChart"></canvas>
</div>
チャートの描画
以下の1行目ではgetElementById関数でcanvas要素をIDから取得し、その2Dコンテキストを取得しています。
取得したコンテキストをChartコンストラクタの第一引数に渡し、第二引数にはチャートの設定値を渡します。
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, config);
基本的にこのような流れでチャートの作成を行っていきます。
チャートの設定値については公式ドキュメントの各チャートのページに記載されています。
折れ線グラフのドキュメント
https://www.chartjs.org/docs/latest/charts/line.html
