モダンJavaScript入門: 動的なチャートとグラフの表示

1. はじめに

この記事では、JavaScriptのライブラリであるChart.jsを使用して、動的なチャートとグラフを作成する方法を紹介します。Chart.jsは、HTML5の<canvas>要素を使用して豊かな視覚化を提供する強力なライブラリです。

2. Chart.jsの導入

Chart.jsはCDNから簡単に導入することができます。以下のコードをHTMLファイルの<head>タグ内に挿入します。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

3. 基本的なチャートの作成

まず、HTMLファイルに<canvas>要素を追加します。

<canvas id="myChart"></canvas>

次に、JavaScriptでChart.jsを使用してチャートを作成します。

let ctx = document.getElementById('myChart').getContext('2d');
let chart = new Chart(ctx, {
    type: 'line', // チャートのタイプ
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
});

これで、基本的なチャートが作成されます。

4. データの更新

Chart.jsの強力な機能の一つは、データの動的な更新です。以下のコードを使用して、既存のチャートのデータを更新することができます。

chart.data.datasets[0].data = [5, 10, 5, 2, 20, 30];
chart.update();

5. 動的なチャートの作成

最後に、動的なチャートを作成します。以下のコードでは、ランダムなデータを生成してチャートを更新しています。

setInterval(function() {
    chart.data.datasets[0].data = [
        Math.floor(Math.random() * 50), 
        Math.floor(Math.random() * 50), 
        Math.floor(Math.random() * 50), 
        Math.floor(Math.random() * 50), 
        Math.floor(Math.random() * 50), 
        Math.floor(Math.random() * 50)
    ];
    chart.update();
}, 2000);

これにより、2秒ごとにチャートのデータがランダムに更新されます。

6. まとめ

この記事では、モダンなJavaScriptを使用して動的なチャートとグラフを作成する方法を学びました。これにより、ユーザーにデータを視覚的に理解しやすい形で提供することができます。続きは、実際に自分で試してみてください。

AIko Code Symphony