经常会画图,用的最多的是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画出来就变成通用的了,适于画一些运维监控图。

文件下载

comments powered by Disqus