下面介绍一个简单的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画出来就变成通用的了,适于画一些运维监控图。