下面介绍一个简单的dimple.js,跟c3.js类似,也是基于d3.js

无废话,直接上代码,在html中加入:

<script src="static/c3d3/d3.v3.min.js" charset="utf-8"></script>  
<script src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>  

一共加了两个js脚本

然后准备数据,还是下面这个文本:

cat data.csv  
data1,data2,data3  
120,80,200  
140,50,210  
170,100,250  
150,70,300  
180,120,280  

然后在html中嵌入代码即可:

<div id="container19" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
<script src="c19.js"></script>  

c19.js的内容:

$.ajax("/data.csv", {
    success: function(data) {
        var csv = d3.csv.parse(data);
        var svg = dimple.newSvg("#container19", 400, 400);
        var chart = new dimple.chart(svg, csv);
        chart.addCategoryAxis("x", "data2");
        chart.addMeasureAxis("y", "data3");
        chart.addSeries(null, dimple.plot.bar);
        chart.draw();
    }
});

出图:

同样直接用python、php、java取数据库内容,然后返回一个csv文件内容,然后用dimple.js画出来就变成通用的了,适于画一些运维监控图。

comments powered by Disqus