HightCharts使用详解

HightCharts详解：

  百度百科： HighCharts [1]    界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。现在官方的最新版本为Highcharts-4.2.3。 [2]  

一、HightCharts优点

1. 首先、使用Highcharts能快速、简单的做出各种诸如柱状图、饼状图、曲线图等多种形式的统计图或者走势图。使用者只需要提供对应的数据、以及简单的Highcharts的配置即可。使用简单。
2. 跨语言跨平台支持多种浏览器。Highcharts是基于js制作出来的。是一个js类库。无论你使用什么后端语言，都可以很方便的使用Highcharts来做图表或者统计。
3. 使用门槛极低、稍微看一下API都可以做出各种符合要求的统计图表等。
4. 数据灵活。支持xml 和json。

二、相关js引入。到官网下载HcightCharts压缩包（官方网址： https://www.hcharts.cn/products/highcharts）

解压后code文件夹中存放的是HightCharts相关的所有js，需要注意的是先引入jquery的js，在引入hcharts相关js时，hcharts.js需要在其他js上边如下图。开发中需要注意的重点是各个hightcharts的js版本要统一eg:highcharts.js与highcharts-3d.js必须是统一个版本中的js，不相同时很容易会出现问题。

相关实例代码参考官方实例演示即可，HightCharts还是比较好学的，当然要想掌握每一个属性的用法是需要后期开发或者学习中不断积累的，其实不需要去记住每一个属性，这也不太现实，建议使用中做好相关笔记在以后的开发中直接用就行。

三、开发中用到的相关属性（在不断完善中，属性详细内容参考官方开发文档： https://api.hcharts.cn/highcharts）

1、柱状图改成3D柱状图

chart标签中添加代码：

  options3d: {
                enabled: true,
                alpha: 10,
                beta: 25,
                depth: 70
            }

2、x轴添加数据方式

 xAxis: {
        categories: 后台传入的数据
    },

3、修改图形、图例颜色

 series: [{
        name: '东京',
        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],
        color:'#dc510e'
    }] 

 存在多组图的时候分别修改颜色即可

series: [{
        name: '东京',
        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],
        color:'#dc510e'
    }, {
        name: '纽约',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
        color:'#CDB79E'
    }]

4、设置图例是否显示

  legend: {
        enabled: false//默认为true，true为显示；false为不显示。不添加此代码默认为显示
}

5、设置x轴数据显示的角度

 labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }//rotation:0表示水平显示x轴数据

6、柱状图、折线图上显示数据

dataLabels: {
   enabled: true,
        format:'{point.y}'
    }//柱状图上显示数据

7、数据显示在柱子中而不是显示在柱子上

plotOptions: {
    column: {
        dataLabels: {
            inside: true
        }
    }
}

8、去掉Hightcharts.com.cn的标志

   exporting:{ enabled:false },
                 credits: {
                     enabled: false
                 },

9、设置柱状图的宽度

plotOptions: {
            column: {
                stacking: 'percent',
                pointWidth:'10' //设置柱状图的宽度
            }
        }

10、柱状图变成有弧度的柱状图

 plotOptions: {
                    series: {
                             borderRadius: 5
                         }
           }

11、实现柱子上显示的不是x轴或者y轴数值而是自定义数组的值

请点击：http://blog.csdn.net/m0_37027631/article/details/78006712