Javascript

【Javascript】きれいな動的なグラフ・チャートを簡単に作れる Chart.js

今回はとても簡単にきれいな動的グラフ・チャートを簡単に作れるChart.jsの紹介。

Chart.js

Chart.jsの各サイト。

Chart.js公式

Chart.js GitHub

Chart.js samples

Chart.js Document

サンプル

以下のサンプルはGetting Startedを使っております。

<canvas id="myChart1"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
var ctx = document.getElementById('myChart1').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

    // Configuration options go here
    options: {}
});
</script>

これだけでもかなりきれいなグラフが作れました。

グラフの種類を変更する

簡単にグラフの種類を変更することが出来ます。

サンプル行の7をbarに変更すると棒グラフに変更できます。

以下のサンプルはChartsに記載がある種類が使用できます。

<canvas id="myChart2"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
var ctx = document.getElementById('myChart2').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'bar',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

    // Configuration options go here
    options: {}
});
</script>

データを更新する

更新ボタンを押すごとに「March」のデータに+1されます。

Updating Chartsを参考にしています。

<canvas id="myChart3"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
var ctx = document.getElementById('myChart3').getContext('2d');
var myLineChart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'bar',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

    // Configuration options go here
    options: {}
});

function updateChart(){
  // 最初のデータセットの値を'March'を'+1'に更新します。
  myLineChart.data.datasets[0].data[2] = myLineChart.data.datasets[0].data[2]+1;
  myLineChart.update();
}
</script>
<p><button onclick="updateChart()" type="button">更新</button></p>

まとめ

データを変更にした際にきれいなアニメーションで表現してくれるのがとても楽しいです。

結構簡単に使えるので色んな場面で使用出来そうです。

細かな使い方はChart.jsに記載がありますので試してみてください。