0%

Programmingプログラミングナレッジ

Posted:2018.05.26

ライブラリ【Chart.js】でシンプルなグラフの描画とカスタマイズをやってみる

分析システムのダッシュボードや、データを扱ったコンテンツがあるウェブサイトなどではグラフの描画されている場面もよく見かけます。今回はそんなグラフの描画を簡単にできるjavascriptのライブラリである「Chart.js」を使って、グラフの作成とカスタマイズをやってみたいと思います。

 

グラフ描画にChart.jsを導入する

Chart.jsはjavascriptでグラフの設定を行い、その内容でcanvas要素としてHTML上に描画されます。といっても、実装はシンプルでグラフが描画されるcanvas要素と、グラフを設定するjavascriptを記述するだけでOKです。

 

まずは導入するための準備が必要となりますが、以下のようにChart.jsのライブラリの読み込みと、グラフ描画のcanvas要素、グラフ設定のscriptを用意します。

【HTML】※一部省略

// ファイルを直接読み込む
<script src='./PATH/Chart.min.js'></script>
// CDNとして読み込む
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>

// グラフ描画の要素とグラフ設定のスクリプト
<canvas id="myChart"></canvas>
<script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myBarChart_02 = new Chart(ctx, {
    type: 'グラフのタイプ',
    data: {
      [グラフデータ]
    },
    options: {
      [表示オプション]
    }
  });
</script>

 

ファイルは公式サイトからダウンロードするか、CDNとして読み込みます。そして、グラフ描画の要素にはidを指定し、そのidをグラフデータと紐付けします。

 

Chart.jsで簡単にグラフを描画する

以下はデフォルトの状態で、基本的なグラフ描画の一例です。これだけである程度見栄えのいいグラフが作成できます。

【javascript】

<script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myBarChart_01 = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["A", "B", "C", "D", "E"],
      datasets: [{
        label: 'データサンプル',
        data: [60, 40, 10, 90, 50, 30],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }
  });
</script>

 

ここではtypeの値にbarを設定することで「棒グラフ」を採用しています。datasets => dataにある配列でそれぞれのグラフで示す数値を入れています。サンプルはこちらに用意していますので参考に。

 

また、グラフの種類は棒グラフの他にも以下のタイプが用意されています。

・線グラフ
・面グラフ
・レーダーチャート
・バブルチャート
・円グラフ
・ドーナツグラフ
・鶏頭図

 

グラフの形状が選択できるので、いろんなデータにも対応することが可能ですね。詳しくは公式のドキュメント(日本語)を参考にしてください。

 

グラフを見やすくカスタマイズする

デフォルトでも洗練されたグラフが描画されますが、Chart.jsではいろんなカスタマイズが可能で、より見やすくすることができます。また、複数のグラフを合わせて表示させることもできますので、複雑なデータをグラフで表現するときに便利です。以下はカスタマイズした時のサンプルです。

【javascript】

<script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["A", "B", "C", "D", "E"],
      datasets: [{
        label: 'データサンプル',
        data: [60, 40, 10, 90, 50, 30],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)'
        ],
        borderWidth: 3,
        hoverBackgroundColor: [
          'rgba(255, 99, 132, 0.7)',
          'rgba(54, 162, 235, 0.7)',
          'rgba(255, 206, 86, 0.7)',
          'rgba(75, 192, 192, 0.7)',
          'rgba(153, 102, 255, 0.7)'
        ]
      },{
        data: [85, 60, 30, 95, 55, 45],
        type: 'line',
        fill: false,
        lineTension: 0,
        pointBackgroundColor: '#999',
        pointBorderColor: '#fff',
        pointBorderWidth: 3,
        pointRadius: 10,
        borderColor: '#999',
        borderWidth: 3,
        pointHoverBackgroundColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)'
        ],
        pointHoverBorderColor: '#fff',
        pointHoverRadius: 10
      }]
    },
    options: {
      legend: {
        display: false
      },
      hover: {
        animationDuration: 1000
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true,
            fontColor: '#900',
            fontSize: 18,
            fontWeight: 'bold',
            max: 100
          },
          gridLines: {
            color: '#ddd',
            borderDash: [5,5],
            lineWidth: 1,
            zeroLineWidth: 2,
            zeroLineColor: '#444',
            drawTicks: false
          }
        }],
        xAxes: [{
          ticks: {
            fontColor: '#000',
            fontSize: 18,
            fontWeight: 'bold'
          },
          gridLines: {
            display: false
          }
        }],
      }
    }
  });
</script>

 

かなり複雑ですが、こちらのサンプルを見てもらうとわかりやすいかと思います。ここではいろんな設定をしていますが、datasetsを続けて書くことで複数のデータを扱いグラフを作成しています。

 

また、デフォルトのラベルや目盛り線なども調整してグラフを見やすくしています。グラフの色は各データに合わせて色を変更することも可能です。

 


 

いかがでしょうか、今回はサンプルとしてハードコーディングで書いていますが、実際の使用ケースとしては、データベースの値を取り出してグラフに描画するなどがあるのではないでしょうか。グラフ描画のライブラリは様々なものがありますが、Chart.jsはシンプルかつビジュアルも綺麗で、いろんなオプションも揃っているので、初めてグラフを作成する場合にはオススメです!今回のグラフはこちらにサンプルとして用意しています。

 

(参考にさせて頂いたサイト)
Chart.js 日本語ドキュメント

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】