HTML5のcanvasでグラフを作れるJavaScript「AwesomeChartsJS」

グラフをサクっと表示させたい時、こんなJavaScriptライブラリがあると便利です。
AwesomeChartJSはHTML5のcanvasを利用して多様なグラフを作れます。
HTML5のcanvasでグラフを作れるJavaScript「AwesomeChartsJS」サンプル

使用方法
AwesomeChartJSからawesomechart.jsをダウロード。
head内に下記を。
<script src="awesomechart.js" type="text/javascript"></script>

次に表示させたい場所には以下を記述。
<canvas id="id名" width="横幅" height="高さ">
html5のcanvasをサポートしてないIEみたいなブラウザ向けの記述
</canvas>

最後にグラフの数値などを記述していきます。
<script type="application/javascript">
var chart = new AwesomeChart('id名');
chart.title = "グラフタイトル";
chart.chartType = "exploded pie"; //グラフのタイプ
chart.data = [51.62,31.3,10.06,4.27,1.96,0.78]; //数値を要素分記述
chart.labels = ['IE','Firefox','Chrome','Safari','Opera','Other']; //ラベルを要素分記述
chart.colors = ['#006CFF', '#FF6600', '#34A038', '#945D59', '#93BBF4', '#F493B8']; //色を指定したい場合(なくてもOK)
chart.draw();
</script>

グラフのタイプには下記があります。
デフォルト:Horizontal bar chart
"horizontal bars"、"pareto"、"pie"、"exploded pie"、"doughnut"

HTML5のcanvasでグラフを作れるJavaScript「AwesomeChartsJS」サンプル

sponsors

「HTML5のcanvasでグラフを作れるJavaScript「AwesomeChartsJS」」をシェアする

記事作成:
記事URL:

TOP > > > HTML5のcanvasでグラフを作れるJavaScript「AwesomeChartsJS」