HTML5 canvas で使えるグラフ表示の代表的なスクリプト紹介

Canvasでグラフを書く際に値を埋めるだけで簡単に任意のグラフの表示を行えるスクリプトを紹介します。   ・CanvasJs グラフの種類は少なめですが、数行のシンプルなコードのみでグラフを作成することができるスクリプトです。 導入方法 公式サイトからダウンロード、またはCDN経由の読み込みで利用することができます。 pie-chart2 line-graph2 bar-graph2   ・Chart.js コードは少し長くなりますが、デザインが豊富に揃っていて柔軟なアレンジも可能なスクリプトです。 導入方法 公式サイトからダウンロード、またはCDN経由の読み込みで利用することができます。 pie-chart line-graph bar-graph chart-radar   ・Flotr2 コードも長く、CDNがないため事前準備も必要になりますが20種以上のグラフを使用できます。 導入方法 公式サイトからダウンロード line-graph3 pie-chart3 bar-graph3 chart-radar3   今回はchart.jsを使用した円グラフ、線グラフ、棒グラフ、レーダーチャートの作成方法を紹介します。 まず初めにchart.jsを読み込む必要があります。
//公式サイトからダウンロード後ファイルを移行して読み込む方法と
<script src="script/Chart.js"></script>
//CDN経由で読み取る方法があります。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
次にcanvasタグを用意します。 id名や高さなどは自由に決めることができます。
<canvas id="canvas" height="500" width="500"></canvas>
この2つの準備ができたら後はグラフに入れる値とグラフの種類を指定するだけで簡単にグラフを作成することができます。   ・円グラフ(Pie) value: 項目の数値 color: 項目の色 highlight: マウスをかざしているときの色 label: 項目名 を指定することができます。
<script>
  var data = [
 {
  value: 400,
  color:"#92cd9f",
  highlight: "#92cd9f",
  label: "Green"
 },
 {
  value: 200,
  color:"#72a6c7",
  highlight: "#72a6c7",
  label: "Blue"
 },
 {
  value: 100,
  color:"#F7464A",
  highlight: "#F7464A",
  label: "Red"
 },
];

var myChart = new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);
  </script>
円グラフデモページ   ・線グラフ(Line) labels:X軸の項目 fillColor: 塗りつぶす色 strokeColor: 線の色 pointColor: 点の色 pointStrokeColor: 点の枠線の色 pointHighlightFill: マウスオーバー時の点の色 pointHighlightStroke: マウスオーバー時の点の枠線の色 data: 値 を指定することができます。
<script>
  var data = {
 labels: ["1月","2月","3月","4月","5月","6月","7月"],
 datasets: [
  {
   fillColor: "rgba(226, 197, 197, 1)",
   strokeColor: "rgba(198, 85, 85, 1)",
   pointColor: "rgba(0, 0, 0, 1)",
   pointStrokeColor: "#000",
   pointHighlightFill: "#c65555",
   pointHighlightStroke: "rgba(198, 85, 85, 1)",
   data: [60,65, 80, 75, 55, 65, 45]
  },

 ]
};
var myChart = new Chart(document.getElementById("canvas").getContext("2d")).Line(data);
  </script>
線グラフデモページ   ・棒グラフ(Bar) labels:X軸の項目 fillColor: 塗りつぶす色 strokeColor: 枠線の色 HighlightFill: マウスオーバー時の塗りつぶす色 HighlightStroke: マウスオーバー時の枠線の色 data: 値 を指定することができます。
<script>
  var data = {
 labels: ["1月","2月","3月","4月","5月","6月","7月"],
 datasets: [
  {
   fillColor: "rgba(226, 197, 197, 1)",
   strokeColor: "rgba(198, 85, 85, 1)",
   HighlightFill: "#c65555",
   HighlightStroke: "rgba(198, 85, 85, 1)",
   data: [60,65, 80, 75, 55, 65, 45]
  },

 ]
};
var myChart = new Chart(document.getElementById("canvas").getContext("2d")).Bar(data);
  </script>
棒グラフデモページ   ・レーダーチャート(Radar) labels:項目 fillColor: 塗りつぶす色 strokeColor: 線の色 pointColor: 点の色 pointStrokeColor: 点の枠線の色 pointHighlightFill: マウスオーバー時の点の色 pointHighlightStroke: マウスオーバー時の点の枠線の色 data: 値
 var data = {
  labels:["1月","2月","3月","4月","5月","6月","7月"],
  datasets: [
   {
    fillColor: "rgba(226, 197, 197, 1)",
    strokeColor: "rgba(198, 85, 85, 1)",
    pointColor: "rgba(0, 0, 0, 1)",
    pointStrokeColor: "#000",
    pointHighlightFill: "#c65555",
    pointHighlightStroke: "rgba(198, 85, 85, 1)",
    data: [65, 59, 90, 81, 56, 55, 40]
   },
  ]
 };

 var myChart = new Chart(document.getElementById("canvas").getContext("2d")).Radar(data);
レーダーチャートデモ  

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です