グラフをぺぺーんと生成できるプラグイン

はい、グラフです。
JSでアニメーションするグラフを作っていきましょう。
自作してもいいけど、安定したプラグインあるならそれでいいじゃない！
そんなわけで、今回はchartJsを使用します。

前段階準備

いつものように、githubからダウンロードしてきて必要ファイルを取ってきましょう。
Chart.js_github
今回はChart.min.jsだけでいいです。

どんなグラフが生成できるのか？

1. 棒グラフ
2. 線グラフ
3. レーダーチャート
4. パイチャート
5. ドーナツチャート
6. Polar Area Chart（鶏頭図）

まぁまぁな感じでできるんですねぇ。
ただし、棒グラフ+線グラフなどの組み合わせ技はできないようです
導入方法としては

1. ChartJSを読み込みます。
2. canvasを設置します。(ID設置必須)
3. 凡例用タグを差し込みます。(ID設置必須)
4. 外部JSとかでペペっとやって表示させます。

楽勝っすね(震え声)
まぁ、オプションというか、色々決め事はあったりするので、指定するものは多くなります。
そこは仕方がないと割りきっていきましょう。
ちなみに、[canvas]を使って2D描画してるので、当然レガシーブラウザには死んでもらう事になります。

オプション

見た目やらなんやらを指定することが出来ます。
結構な量がありますが、以下表を参照してください。
たぶん正確だと思いたいですが、各グラフ毎に使えるものをまとめれるようにしました。

• 棒グラフ
• 線グラフ
• レーダーチャート
• パイチャート
• ドーナツチャート
• 鶏頭図
• 全て

このオプションは任意なので、全てを指定する必要はないです。
必要なものだけ上書きしていく感じにしましょう。

グラフの生成について

各種グラフの生成方法自体はほぼ共通です。
データ指定やら呼び出しメソッドは違いますが。その辺は後述するとして、基本形を最初にやりましょう

var [変数] = new Chart([canvasDom指定].getContext("2d")).[呼び出したいグラフのメソッド]([グラフ用データ群],[グラフ生成用オプション(任意)]);

[変数]

インスタンス化しますので、適当な名前の変数を置いてあげましょう。
勿論、ここで変数宣言をする必要なんかありません。

[canvasDom指定]

グラフを生成するcanvasの指定をしてあげます。
基本ID指定でいいでしょう。
※補足：.getContext()を使用し、コンテキストを取得しないと、JS側から描画することができませんので必ず指定しましょう。

[呼び出したいグラフのメソッド]

グラフはそれぞれ違うメソッドで呼び出されます。
以下の呼び出し方法となります。

[グラフ用データ群]

グラフに表示したいデータをオブジェクトにまとめここに指定します
データの記述方法などは、グラフによって違う事があります。
その辺は後述です。

[グラフ生成用オプション(任意)]

上述しているオプションの変更があればここで指定します。
これでもオブジェクトにしてここに入れ込んであげます。

棒グラフ

では、棒グラフを作っていこうと思います。

表示データの指定

表示させるデータを棒グラフの色味などのちょっとした指定を行うことができます。

var barChartData = {
  datasets:
  [
    {
      // 棒グラフの色を指定
      fillColor:"#EFFBFB",
      // 棒グラフの線の色指定
      strokeColor: "#000",
      // 表示する値
      data:[20, 40, 30, 10, 50]
    }
    ,
    {
      // 2つ目の棒グラフ。隣り合うグラフを作成します。
      fillColor:"#fff",
      strokeColor: "#000",
      data:[10, 10, 2, 33, 60]
    }
  ],
  // X軸上のラベル
  labels:["A", "B", "C", "D", "E"]
};
borderGlfOption1 = {
  animation: true,
  animationSteps: 60
}

グラフの描画

var borderGlfObj = new Chart(document.getElementById("borderGlf").getContext("2d")).Bar(barChartData,borderGlfOption1);

折れ線グラフ・レーダーチャート

続いて折れ線グラフ・レーダーチャート
指定データの形式は同じなのでまとめてやっちゃいますね。

// 折れ線グラフ・レーダーチャート
var lineRadarChartData = {
  datasets:[
    {
      // X軸とグラフ間の色
      fillColor:"#EFFBFB",
      // 線の色
      strokeColor: "#18DCDC",
      // グラフ上の点の色
      PointColor: "#DCDCDC",
      // 点の縁色
      pointStrokeColor: "#000",
      // 表示する値
      data:[20, 40, 30, 10, 50]
    }
  ],
  // X軸上のラベル
  labels:["A", "B", "C", "D", "E"]
};
lineRadarGlfOption1 = {
    animation: true,
    animationSteps: 60
}

グラフの描画

var lineGlfObj = new Chart(document.getElementById("lineGlf").getContext("2d")).Line(lineRadarChartData,lineRadarGlfOption1);
var radarGlfObj = new Chart(document.getElementById("radarGlf").getContext("2d")).Radar(lineRadarChartData,lineRadarGlfOption1);

パイチャート・ドーナツチャート・鶏頭図

所謂円グラフと呼ばれるもの
これも指定同じなのでまとめていきます。

// パイチャート
var pieChartData = {
  // 表示する値、塗りつぶしの色
  { value: 20, color: "rgba(255, 30, 30, 0.7)"  },
  { value: 40, color: "rgba(255, 255, 30, 0.7)" },
  { value: 30, color: "rgba(30, 255, 30, 0.7)"  },
  { value: 10, color: "rgba(30, 255, 255, 0.7)" },
  { value: 50, color: "rgba(30, 30, 255, 0.7)"  }
};
pieGlfOption1 = {
  animation: true,
  animationSteps: 60
}

グラフの描画

var pieGlfObj = new Chart(document.getElementById("pieGlf").getContext("2d")).Pie(pieDoughnutPolarAreaChartData,pieDoughnutPolarAreaGlfOption1);
var doughnutGlfObj = new Chart(document.getElementById("doughnutGlf").getContext("2d")).Doughnut(pieDoughnutPolarAreaChartData,pieDoughnutPolarAreaGlfOption1);
var polarAreaGlfObj = new Chart(document.getElementById("polarAreaGlf").getContext("2d")).PolarArea(pieDoughnutPolarAreaChartData,pieDoughnutPolarAreaGlfOption1);

グラフの再描画

なんかこう、グラフの値が変わって再描画したい場合があると思います。
そんな時は、updateメソッドを実行してあげましょう。

  var bar2ChartData = {
  datasets:
  [
    {
      // 棒グラフの色を指定
      fillColor:"#EFFBFB",
      // 棒グラフの線の色指定
      strokeColor: "#000",
      // 表示する値
      data:[20, 40, 30, 10, 50]
    }
  ],
  // X軸上のラベル
  labels:["A", "B", "C", "D", "E"]
};
borderGlf2Option1 = {
    animation: true,
    animationSteps: 60
}

var borderGlf2Obj = new Chart(document.getElementById("borderGlf2").getContext("2d")).Bar(bar2ChartData,borderGlf2Option1);

$('#borderDataSet').on('click',function(){
  // 棒グラフの例
  borderGlf2Obj.datasets[0].bars[0].value = getNumData($('#borderData1'));
  borderGlf2Obj.datasets[0].bars[1].value = getNumData($('#borderData2'));
  borderGlf2Obj.datasets[0].bars[2].value = getNumData($('#borderData3'));
  borderGlf2Obj.datasets[0].bars[3].value = getNumData($('#borderData4'));
  borderGlf2Obj.datasets[0].bars[4].value = getNumData($('#borderData5'));
  borderGlf2Obj.update();
});

function getNumData(elem)
{
  if(elem.val() < 0 || isNumber(elem.val()) == false ) return 0;
  return elem.val();
}
function isNumber(x){ 
  if( typeof(x) != 'number' && typeof(x) != 'string' )    return false;
  else 
    return (x == parseFloat(x) && isFinite(x));
}

※数値以外入力されるとグラフが全部死にますので、一応軽く対処してます。

データの追加方法

  // 線グラフ・レーダーチャート例
  elemObj.datasets[0].points[2].value = 50;
  
  // 棒グラフ例
  elemObj.datasets[0].bars[2].value = 50;

  // 鶏頭図・パイチャート・ドーナツチャート例
  elemObj.segments[1].value = 10;

  // 共通のupdate これで再描画が実行される
  elemObj.update();

こんな感じでデータ指定方法が違ってきています
ここは注意してください。
elemObjはインスタンス化したオブジェクト。

データの追加

データ自体を追加したい場合は以下のようになります。

var bar3ChartData = {
  datasets:
  [
    {
      // 棒グラフの色を指定
      fillColor:"#EFFBFB",
      // 棒グラフの線の色指定
      strokeColor: "#000",
      // 表示する値
      data:[20, 40, 30, 10, 50]
    }
  ],
  // X軸上のラベル
  labels:["A", "B", "C", "D", "E"]
};
borderGlf3Option1 = {
    animation: true,
    animationSteps: 60
}

var borderGlf3Obj = new Chart(document.getElementById("borderGlf3").getContext("2d")).Bar(bar3ChartData,borderGlf3Option1);
var borderGlf3flg = 0;
$('#borderDataAdd').on('click',function()
{
  if(borderGlf3flg == 1) return false;
  borderGlf3flg = 1
  // 棒グラフの例
  borderGlf3Obj.addData([40], "F");
});

データの追加方法

  // 線グラフ・レーダーチャート・棒グラフ例
  elemObj.addData([40, 60], "August");
  
  // 鶏頭図・パイチャート・ドーナツチャート例
  elemObj.addData({
    value: 130,
    color: "#B48EAD",
    highlight: "#C69CBE",
    label: "Purple"
  });

ここもグラフによって変わってきていますね。

データの削除

追加できりゃー 削除もできる。

var bar4ChartData = {
  datasets:
  [
    {
      // 棒グラフの色を指定
      fillColor:"#EFFBFB",
      // 棒グラフの線の色指定
      strokeColor: "#000",
      // 表示する値
      data:[20, 40, 30, 10, 50]
    }
  ],
  // X軸上のラベル
  labels:["A", "B", "C", "D", "E"]
};
borderGlf4Option1 = {
    animation: true,
    animationSteps: 60
}

var borderGlf4Obj = new Chart(document.getElementById("borderGlf4").getContext("2d")).Bar(bar4ChartData,borderGlf4Option1);
var borderGlf4flg = 0;
$('#borderDataDel').on('click',function()
{
  if(borderGlf4flg == 1) return false;
  borderGlf4flg = 1
  borderGlf4Obj.removeData(0);
});

データの削除方法

  // 全共通
  elemObj.removeData(index);

indexはデータ配列のキーを指定します。

その他

clear

// clear
var bar5ChartData = {
  datasets:
  [
    {
      // 棒グラフの色を指定
      fillColor:"#EFFBFB",
      // 棒グラフの線の色指定
      strokeColor: "#000",
      // 表示する値
      data:[20, 40, 30, 10, 50]
    }
  ],
  // X軸上のラベル
  labels:["A", "B", "C", "D", "E"]
};
borderGlf5Option1 = {
    animation: true,
    animationSteps: 10
}

var borderGlf5Obj = new Chart(document.getElementById("borderGlf5").getContext("2d")).Line(bar5ChartData,borderGlf5Option1);

$('#borderDataClear').on('click',function(){
  borderGlf5Obj.clear();
})

clearだから綺麗さっぱり消しちゃうのかなと思ってましたが
一時的非表示にするニュアンスのほうが正しいのかなと思ってます。
現にマウスオーバーでチップ表示させたら復活してきますし。

stop

// stop
var bar6ChartData = {
  datasets:
  [
    {
      // 棒グラフの色を指定
      fillColor:"#EFFBFB",
      // 棒グラフの線の色指定
      strokeColor: "#000",
      // 表示する値
      data:[20, 40, 30, 10, 50]
    }
  ],
  // X軸上のラベル
  labels:["A", "B", "C", "D", "E"]
};
borderGlf6Option1 = {
    animation: true,
    animationSteps: 6000
}

var borderGlf6Obj = new Chart(document.getElementById("borderGlf6").getContext("2d")).Line(bar6ChartData,borderGlf6Option1);

$('#borderDataStop').on('click',function(){
  borderGlf6Obj.stop();
})

アニメーションが途中で止まりますが
いるかこれ・・・

render

  // render
var bar7ChartData = {
  datasets:
  [
    {
      // 棒グラフの色を指定
      fillColor:"#EFFBFB",
      // 棒グラフの線の色指定
      strokeColor: "#000",
      // 表示する値
      data:[20, 40, 30, 10, 50]
    }
  ],
  // X軸上のラベル
  labels:["A", "B", "C", "D", "E"]
};
borderGlf7Option1 = {
    animation: true,
    animationSteps: 600
}

var borderGlf7Obj = new Chart(document.getElementById("borderGlf7").getContext("2d")).Line(bar7ChartData,borderGlf7Option1);
$('#borderDataRender').on('click',function(){
  borderGlf7Obj.render();
})

updateではなく、現在の設定でグラフを再描画します。
0から再描画となります。

destroy

グラフを削除します。
アニメーション途中から消したい場合はstopと併用する必要があるようですね
良かった。stopの有効性を見つけた！