3テラバイト

プログラム関連備忘録サイト。主にゲーム。

HTML JavaScript

チャートを簡単に追加できるJavaScriptライブラリChart.jsの使い方

投稿日:

折れ線グラフ、棒グラフ、レーダーチャート、ドーナツチャート、円グラフ、ポーラチャート、バブルチャート、散布図等のチャートをWebサイトに簡単に追加することができます。

公式サイト

https://www.chartjs.org/docs/latest/

コードサンプル

折れ線グラフ

<html>
  <head>
    <title>Chart.js Sample</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <div>
      <canvas id="myChart"></canvas>
    </div>
    <script>
const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
};
const config = {
  type: 'line',
  data: data,
  options: {}
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, config);
    </script>
  </body>
</html>

CDN

ここではCDNを使用してchart.jsを読み込んでいます。
以下のコードでchart.jsが使用可能になります。

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

チャートを描画するCanvasを用意

canvas要素にチャートを描画するため、canvas要素を用意し、IDに任意の値を指定しておきます。

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

チャートの描画

以下の1行目ではgetElementById関数でcanvas要素をIDから取得し、その2Dコンテキストを取得しています。
取得したコンテキストをChartコンストラクタの第一引数に渡し、第二引数にはチャートの設定値を渡します。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, config);

基本的にこのような流れでチャートの作成を行っていきます。
チャートの設定値については公式ドキュメントの各チャートのページに記載されています。

折れ線グラフのドキュメント
https://www.chartjs.org/docs/latest/charts/line.html

-HTML, JavaScript


comment

メールアドレスが公開されることはありません。

関連記事

no image

JavaScriptで0埋めする方法

こんにちは、今日はJavaScriptで0埋めする方法についてまとめていきます。 0埋め 以下のような関数で第一引数に0埋めしたい数値を、第二引数に数値の桁数を指定すると、指定桁数になるように0埋めさ …

no image

JavaScriptでコンソールにデータを表形式で表示する関数Console.table

以下のように引数にオブジェクトを渡すと、その内容を表形式でコンソールに出力することができます。 console.table(["value1", "value2 …

no image

ブラウザのコンソールからページ内のリンクリストを確認する

ブラウザのコンソールにdocument.linksの内容を出力すると、現在の文書内にあるリンクのリストが返され、任意の要素をクリックでそのリンクを確認することができます。 console.log(do …

no image

JavaScriptでMath.jsを用いて組み合わせの数の計算をする

math.combinations関数の第一引数に総数を、第二引数に取り出す数を渡すと、組み合わせの数が返されます。 <html> <head> <script type …

no image

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

Exif.jshttps://github.com/exif-js/exif-js 使い方 ここではローカルサーバーに配置したHTMLファイルから使用します。fileプロトコルでアクセスしている場合は …