画图的小工具之一c3.js

经常会画图，用的最多的是hichart，很方便，好用。

偶尔也看看其他的工具，下面介绍一个简单的c3.js，基于d3.js

无废话，直接上代码，在html中加入：

<link href="static/c3d3/c3.css" rel="stylesheet" type="text/css">  
<script src="static/c3d3/d3.v3.min.js" charset="utf-8"></script>  
<script src="static/c3d3/c3.js"></script>  

一共加了一个css，两个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="container17" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
<script src="c17.js"></script>  

c17.js的内容：

      var container17 = c3.generate({
        bindto: '#container17',
        data: {
          url: '/data.csv'
        }
      });

出图：

很简单吧，其实直接用python、php、java取数据库内容，然后返回一个csv文件内容，然后用c3.js画出来就变成通用的了，适于画一些运维监控图。

文件下载