chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2015/01/16

[jQuery]IE8でも対応可!チャート表示jQueryプラグイン「jquery.canvasChart.js」

IE8にも対応したチャート図を載せたいという要望があり、jQueryで対処出来そうなプラグインをいくつか調べてみました。IE8に対応していて、簡素な表示であれば、「jquery.canvasChart.js」がひとまず表示可能でしたので、デモを作ってみました。このプラグインのライセンスはCC 2.1です。

IE8にも対応したチャート表示がしたい

ある案件で、モダンブラウザからIE8までチャート表示がしたいというご要望がありました。

チャートの種類は、レーダーチャートと言われるものでした。

rader-chart-js

上の画像のチャートがレーダーチャート(画像はChart.jsのもの)です。

そこで、色々と調べたり検証をしたのでここに残しておきたいと思います。

jQueryで表示出来るチャートプラグインを調べてみた

どんなのがあるかなぁと思い、まずは調べてみました。

jQueryチャートプラグイン

D3.js – Data-Driven Documents

http://d3js.org/

ライセンス: BSDライセンス

 

Chart.js | Open source HTML5 Charts for your website

http://www.chartjs.org/

ライセンス: MITライセンス

 

jqPlot Charts and Graphs for jQuery

http://www.jqplot.com/index.php

ライセンス:  MIT/GPL 2 デュアルライセンス

 

jquery CanvasChart.js

http://oreweb.toypark.in/jquery.canvasChart/

ライセンス: CC 2.1

IE8で動作チェック

D3.jsは規模が大きく、使わない部分の方が多かったため、仕様を確認する前に除外しました。

もう少し調べた所、IE8ではAightと呼ばれるライブラリを一緒に読み込む必要があるそうです。全く検証をしてないのであやふやですが。。

Chart.jsではIE8もcanvasを利用しているので、その対応ライブラリである、excanvas.jsをダウンロードすれば表示出来ますと書かれていたので、Chart.jsを試してみました。

excanvas.jsは最新が2009年3月となります。(古いなと思い、他を探してみましたが、これが最新版だそうです)

IE8にライブラリを読み込ませて、テストしてみた所、プロパティはサポートされていませんというエラー。。。

その後ちょこちょこオプションを変えたりして試してみましたが、解決出来ず。諦めました。

 jquery.canvasChart.js

レーダーチャートのサンプルがあり、日本語で書かれていたのでjqPlotより先にテストしてみました。

また丁寧に書かれており、このプラグインもIEに対して、

canvasを対応させるためにexcanvas.jsを読み込んでくださいと書かれておりました。

で、早速実装してみました。

scriptの読み込み/設定

<script src="common/js/jquery-1.9.1.min.js"></script>
<script src="common/js/bootstrap.min.js"></script>
<script src="common/js/jquery.canvasChart.js"></script>
<!--[if lte IE 8]><script src="common/js/excanvas.compiled.js"></script><![endif]-->
<script>
$(function(){
 $('#canvasChart').canvasChart({
 polygon : 4,
 valuation : 200,//評価値
 valuationPrint : true,//評価値
 valuationCntPrint : false,//評価の数値表記
 valuationName : ['HTML5','CSS3','Javascript','PHP'],
 radius : 120,//半径
 bgStroke : false,//背景の線
 chartStrokeColor : ['#858585','#ff5a5a'],//チャートの線
 bgFillColor : 'rgb(255, 255, 255)',//背景の塗り
 chartFillColor : ['none','none'],//チャートの塗り
 chartPointSize : [5],//チャートの点サイズ
 chartPointColor : ['','rgb(90,0,18)'],//チャートの点描画色、指定無しで背景線と同じ色
 scale : false,//ゲージラインの目盛り描画
 scaleSize : 10//ゲージラインの目盛りサイズ
 });
});
</script>

html

<div id="canvasChart" style="width:50%;">
 <canvas height="450" width="450"></canvas>
  <div class="chartInput">
   <input type="hidden" value="125" id="input1" name="input1" />
   <input type="hidden" value="150" id="input2" name="input2" />
   <input type="hidden" value="130" id="input3" name="input3" />
   <input type="hidden" value="23" id="input4" name="input4" />
  </div>
  <div class="chartInput">
   <input type="hidden" value="85" id="input1" name="input1" />
   <input type="hidden" value="34" id="input2" name="input2" />
   <input type="hidden" value="23" id="input3" name="input3" />
   <input type="hidden" value="125" id="input4" name="input4" />
  </div>
</div>

デモサンプル作ってみました。

誰かのお役に立てると幸いです。

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加