Chart.js は JavaScript でグラフ (チャート) を描画するためのライブラリです。MIT ライセンスで公開されているので、無料で使用することができます。Chart.js を使うと綺麗なグラフを簡単に作成できるようで、M.Hiroi も興味を持ちました。M.Hiroi's Home Page の図を Chart.js で表示すると、かっこよく見えるようになるかもしれません。
本ページでは、簡単なプログラムを作りながら Chart.js の基本的な機能を勉強していきたいと思っています。なにぶんにも初心者が作るプログラムなので、勘違いや間違いがあると思います。お気づきの点がありましたら、メールにてご指摘いただけると助かります。本ページは M.Hiroi の「覚え書」にすぎませんが、よろしければお付き合いくださいませ。
簡単な例として、次の多項式をグラフに表示してみましょう。
リスト : 多項式の表示
<div style="width:600px; background-color: white">
<canvas id="mychart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script>
let xs = [];
for (let i = -2; i <= 2; i += 0.25) xs.push(i);
const ctx = document.getElementById('mychart');
new Chart(ctx, {
type: 'line',
data: {
labels: xs,
datasets: [
{
label: 'y = x**2 - 1',
data: xs.map(x => x ** 2 - 1)
},
{
label: 'y = x**3 - 4x',
data: xs.map(x => x ** 3 - 4*x)
},
{
label: 'y = x**4 - 6x**2 + 4',
data: xs.map(x => x ** 4 - 6 * x**2 + 4)
}]
},
options: {
lineTension: 0.4
}
});
</script>
『お気楽 Chart.js 超入門』の著作権は筆者「広井誠 (Makoto Hiroi)」が保持します。無断使用や無断転載は禁止いたします。本ページで作成したプログラムはフリーソフトウェアとします。ご自由にお使いください。プログラムの改造や配布もご自由にどうぞ。その際は出典を明記してくださるようお願いいたします。
ただし、これらのプログラムは無保証であり、使用したことにより生じた損害について、作者「広井誠 (Makoto Hiroi)」は一切の責任を負いません。また、これらのプログラムを販売することで利益を得るといった商行為は禁止いたします。