最开始用Highcharts是客户要求我们对统计结果进行可视化，而Highcharts支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达十几种不同类型的图表，样式也较为美观，可与excel里面的图标样式相媲美。

 

part1 入门

　　Highcharts入门很简单，参考教程就可以根据自己的需求做出想要的效果了。

　　参考网址Highcharts中文网：http://www.hcharts.cn/index.php。其中在线演示可以查看源码，另外还有文档教程API文档进行细节的学习。

　　首先了解下Highcharts的基本组成：

highcharts修改series_柱状图

（图片来自Highcharts中文网）

　　先了解各个部分的名称，检索各部分的设置方法的时候也清楚些。比如想知道图例可以放在上边的时候怎么设置，就可以检索“legend”，找到跟图例相关的设置：

highcharts修改series_highcharts修改series_02

 

part2 遇到的显示问题及解决方法

　　折线图、饼图、柱状图是我工作中使用的比较多的，下面给出一些遇到的小问题和解决方法：

　　（1）如何去掉右下角的网址

1 credits:{
2     enabled:false // 禁用版权信息
3 }

　　（2）如何改变数字的分隔符、小数点、导出图片按钮由原来的英文改成中文以及没有数据的时候进行提示

1 // 全局配置
2 Highcharts.setOptions({
3 　　lang:{
4　　　　contextButtonTitle:"图表导出菜单",
5　　　　decimalPoint:".",                               
6　　　　noData:"没有数据",                          
7　　　　thousandsSep:","                               
8     }
9 });

　　（3）标题的显示控制

　　主标题不显示则设置text为null，副标题不显示直接不设置subtitle就可以

1 title: {
2      text: null
3 }

　　（4）横向纵向网格线显示控制

　　通过gridLineWidth来控制显示，0为不显示，>0显示。

　　xAxis的gridLineWidth默认为0，yAxis的gridLineWidth默认不为0，需要通过设置为0来控制不显示。

1 yAxis: {
2     gridLineWidth: 0
3 }

 　　（5）设置图表背景为透明

1 chart: {
2     backgroundColor: 'rgba(0,0,0,0)'
3 }

 

part3 ajax传参数据处理方法

　　对于highcharts，设置方面的细节文档几乎都可以查到方法，比较麻烦的应该是传参。对于已经固定的参数，可以直接按着例子去设置；对于后台传来的不固定的值，则要把ajax传过来的json值进行格式转换。下面举例饼图和柱状图ajax传参后如何设设置，直接给出示例代码：

　　（1）饼图（直接在ajax方法内设值）：

1 //异步请求数据
 2 $.ajax({
 3     type:"post",
 4     dataType:'json',
 5     url:"exampleUrl",
 6     success:function(data){
 7         //定义一个数组
 8         browsers = [],
 9         //迭代，把异步获取的数据放到数组中
10         $.each(data,function(i,d){
11             browsers.push([d.name,d.percent]);
12         });
13         //设置数据
14         chart.series[0].setData(browsers);  
15     },
16     error:function(e){
17         alert(e);
18     }
19 });

　　（2）柱状图（ajax方法内取值，方法外设置）：

1 //定义数组
 2 var xname=[];
 3 var onlineRate=[];
 4 //异步请求数据
 5 $.ajax({
 6     type:'post',
 7     dataType:'json',
 8     data:query,
 9     url:" exampleUrl ",
10     success:function(data){
11         //迭代，把异步获取的数据放到数组中
12         $(data).each(function(){
13             xname.push(this.name);
14             onlineRate.push(this.onlineRate);
15         });                                                                            
16     }                                                    
17 });

设值：

xAxis: {
    categories: xname
},
series: [{
    name: '全省在线情况',
    data: onlineRate,
    dataLabels: {
        enabled: true,
        formatter: function() {
            return this.point.y+"%";
        }
    }                    
}]

　　在ajax方法内设值或者方法外都是可以的，根据具体情况灵活处理。以上例子只截取了部分关键代码，仅供参考。

　　希望以上描述有帮到需要的人，有不清楚的可以留言。