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