JavaScriptでグラフを作る方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptでグラフを作る方法について、簡単に解説していきます。

ライブラリ読み込み

JavaScriptにはグラフを作るライブラリがあります。

それはChart.jsというもので様々なタイプのグラフを作れます。

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

Chart.jsを使うためには、scriptタグでjsファイルを読み込む必要があります。

HTML

HTMLのサンプルを以下に示します。

<canvas id="hoge_chart"></canvas>

グラフ描画用のcanvas要素を配置します。

必要に応じて、CSSで調整を行ってください。

JavaScript

JavaScriptのサンプルは下記のとおりです。

var data = {
  labels: ['田中', '山田', '高橋'],
  datasets: [{
    label: '1月の営業成績',
    data: [500, 380, 700]
  }]
};
var ctx = document.getElementById('hoge_chart')
var hoge_chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {}
});

今回は3人の1月の営業成績をグラフにします。

dataという名の変数にデータを、ctxの名前の変数にcanvas要素を格納し、new Chartでそれらの変数を指定し、グラフを描画します。