JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Chart.js入門：JavaScriptでアニメーション付きインタラクティブなグラフを簡単に作成する方法

Chart.jsとは？

Chart.jsは、オープンソースとして公開されている軽量なJavaScriptのグラフ描画ライブラリです。Chart.jsを活用することで、HTML5のcanvas要素をベースとした、滑らかなアニメーション付きのインタラクティブなグラフを、ウェブサイトに手軽に組み込むことができます。

Chart.jsには棒グラフ・折れ線グラフ・円グラフ・ドーナツグラフ・レーダーチャートなど、多彩なチャートタイプが標準で用意されており、数行のコードを書くだけで視覚的に魅力的なデータ可視化を実現できます。また、レスポンシブデザインに対応しているため、デスクトップPCからスマートフォンまで、さまざまな画面サイズに自動的に適応する点も大きな魅力です。

以下に、Chart.jsライブラリを使用した基本的なJavaScriptのサンプルコードを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>
<body>
<canvas id="myChart" width="500" height="300"></canvas>
<script type="text/javascript">
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["2005", "2007", "2009", "2012", "2014"],
            datasets: [
                { label: 'HouseHold income',
                  data: [5000, 8000, 10000, 1200, 15000],
                  backgroundColor: [
                    'rgba(255, 129, 102, 1)',
                    'rgba(234, 162, 235, 1)',
                    'rgba(255, 206, 36, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)'
                  ]
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>
</body>
</html>

このコードでは、まずCDN経由でChart.jsライブラリを読み込みます。次に、<canvas>要素への参照を取得し、new演算子でChartインスタンスを生成しています。typeプロパティに「bar」を指定することで棒グラフが描画され、labelsに年度、datasets.dataに世帯収入の値を設定しています。各バーの色はbackgroundColorで個別に指定でき、options内のbeginAtZero:trueによりY軸が0から始まるように設定されています。

実行結果

Chart.js入門：JavaScriptでアニメーション付きインタラクティブなグラフを簡単に作成する方法

このように、Chart.jsを使えば最小限のコードで、色鮮やかで見栄えの良い棒グラフを実装できます。データやラベルを差し替えるだけで、さまざまな用途に応用できるため、ダッシュボードやレポートページなどの構築にもおすすめのライブラリです。

  1. JavaScriptのPromise（プロミス）とは？非同期処理の基本と使い方を解説

    JavaScriptのPromise（プロミス）は、作成された時点ではまだ値が確定していない非同期処理を扱うためのオブジェクトです。APIリクエストやファイルの読み込みなど、完了まで時間がかかる処理について、「いずれ結果を受け取る」という約束を表現します。Promiseは、以下の3つの状態を持ちます。pending（保留中）：処理がまだ完了しておらず、成功も失敗も確定していない初期状態fulfilled（履行済み）：処理が正常に完了し、結果の値が利用できる状態rejected（拒否済み）：処理が失敗し、エラーの理由が利用できる状態一度fulfilledまたはrejectedに遷移したPromi

  2. JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説

    JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS