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

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

sponsors

使用方法

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>
	
上記のようにずらっと記述したら、最後に表示させたい場所に下記を記載すれば完成です。

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors