高機能なグラフ描画JavaScriptライブラリ「EChats」

グラフ描画が可能なJavaScriptは多いですが、ここまで高機能なものはなかったかもしれません。
EChartsはBaidu製のグラフ生成ライブラリです。
高機能なグラフ描画ライブラリ「EChats」サンプル

使用方法
EChartsからもダウンロードできますが、下記のように読み込むことでも記述可能です。
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
//ここからグラフの記述。
require(
[
'echarts',
'echarts/chart/bar',//表示したいグラフの種類
'echarts/chart/line' //表示したいグラフの種類
],
function (ec) {
var myChart = ec.init(document.getElementById('main')); //表示する場所のIDを記述します
var option = {
tooltip: { //ツールチップ表示
show: true
},
legend: {//項目表示
data:['項目1','項目2']
},
toolbox: { //右上に表示される切り替え
show : true,
feature : { //棒と折れ線を表示させる
magicType : {show: true, type: ['line', 'bar'], title : {
line : '折れ線グラフ',
bar : '棒グラフ'
},}
}
},
xAxis : [ //X軸
{
type : 'category',
data : ["Shirts", "Sweaters", "Chiffon Shirts", "Pants", "High Heels", "Socks"]
}
],
yAxis : [//Y軸
{
type : 'value'
}
],
series : [ //各要素の記述
{
"name":"項目1", //項目名※上記と同じものを記載
"type":"bar", //グラフ指定
"data":[5, 20, 40, 10, 10, 20] //グラフ数値
},{
"name":"項目2", //項目名※上記と同じものを記載
"type":"bar", //グラフ指定
"data":[1, 10, 30, 15, 5, 20]//グラフ数値
}
]
};
myChart.setOption(option);
}
);
</script>

上記のようにずらっと記述したら、最後に表示させたい場所に下記を記載すれば完成です。
<div id="main" style="height:400px;width:800px;"></div>
高機能なグラフ描画ライブラリ「EChats」サンプル

sponsors

「高機能なグラフ描画JavaScriptライブラリ「EChats」」をシェアする

記事作成:
記事URL:

TOP > > > 高機能なグラフ描画JavaScriptライブラリ「EChats」