2014-10-21报表绘图

问题描述：既然是做报表那就肯定会有，绘图问题了，最常见的就是折线图，饼图，柱状图。我在做待办数量排行的时候需要显示成折线图，柱状图，饼图。

在这里我说一下我参考的绘图工具：

第一个： jfreechart大概看了一下，代码需要写在后台感觉不是很方便，因为现在很多都是异步加载，我把数据返回给前台，在前台绘图效果不是更好，速度也应该更快吧！重点是前台处理简单呀。因此放弃了。

第二个：c3.js这个其实是一个很强大的绘图工具。操作都是在前台，主要是js代码，问题在于c3.js现在使用的人还不是很多，网上例子不多，我看了一下API，也做了一些demo，最后还是没有采用，主要是不兼容ie7,8，fuck老大不让用。

第三个：highcharts这个应该是现在的主流了，代码也全是js，在前台完全可以处理，主要的是兼容所有的版本。因此我采用了highchart。

类似的还有雅虎的Yahoo! UI Library: Charts，以及d3等等给一个绘图工具介绍的链接http://jingyan.baidu.com/article/c85b7a642bb8e9003bac951b.html?qq-pf-to=pcqq.c2c

我主要谈谈我接触到的c3.js和highcharts

c3.js:

第一步： 到这个网站下载用到的js和CSS  http://c3js.org/

主要是c3.js和d3.js 以及c3.css

<!-- Load c3.css -->
<link href="C:/Users/yuxi/Desktop/C3JS/c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="C:/Users/yuxi/Desktop/C3JS/c3.js" charset="utf-8"></script>
<script src="C:/Users/yuxi/Desktop/C3JS/d3.js" charset="utf-8"></script>

第二步：在页面定义一个div这个div应该有一个特定的id

<div id="chart"></div>

第三步：

写入相应的js代码

<script type="text/javascript">

	var chart = c3.generate({

//和页面的div绑定
   <span style="white-space:pre">	</span>        bindto: '#chart',

//放回从后台的到的数据，应该是放在一个list集合里面或者数组里面
                data: {
                     columns: [
                             ['data1', 30, 200, 100, 400, 150, 250]              
                    ],

//这个是说明绘制的是什么样的图形 bar，line,pie
           <span style="white-space:pre">	</span>     type: 'bar',
                     labels: true
        },

//axis 表示德尔是坐标
	axis: {

//y轴 的属性
		y: {
                    label: {
                         text: '数量',
                          position: 'outer-middle'
                    }
                   },

<pre name="code" class="javascript" style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;">//x轴 的属性

	        x: {
	 	        type: 'category',
		        categories: ['xx', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6']
	  }
    }
});

就是这么简单，还有一些细节的问题需要查相应的API和官方的 demo，绘制折线图和柱状图其实就需要改一下type就可以，在官网上还有许多图形之间的转换，可以自己试试

显示的图形结果是这样的

我在说说highcharts的使用：

第一步：下载js,   官网地址http://www.highcharts.com/ 

如果需要导出的话下载一个exporting，不需要的话直接下载highcharts.js和jQuery.js

第二步： 在页面添加相应的div

<div id="container"></div>

第三步：写入相应的js

<span style="font-size:18px;"><script type="text/javascript">  
            $(function () {  
            var chart;   
            $(document).ready(function() {  
                chart = new Highcharts.Chart({  
                //HighCharts中chart属性配置  
                  chart: {  
                    renderTo: 'container',//div 标签  
                    type: 'column'
                   
				  },
                  xAxis: {  
                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',  
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']  
                    },       
                  series: [{  
                        name: 'Tokyo',  
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]  
                    }]  
                });  
            });  
        });  
</script>  
</span>

还有一些显示需要的属性可以看相应的API

在这里我记录下我在项目应用的时候遇到的问题，希望大牛可以解答一下

第一个：在显示没一个点的数据的时候会出现乱码现象。

第二个：饼状图设置的时候有点问题。

刚接到电话心情不好了，不想写了，直接贴个图显示一下结果。