多功能图表之highcharts的使用说明

摘要: js图表库，HighCharts的使用说明

highCharts可以说是一款知名度非常高的图表库，目前的highCharts可以支持直线图，曲线图，饼图等近18中图表
这两天也有机会接触highCharts中几款常用的图表
放图：







当然这里展示的混合是的图表开发，还有很多别的常用的图表demo





这里就不再列举了
下面简单的介绍下highCharts的使用
首先我们需要引入jQuery，当然，如果是仅仅在图表利用到jQuery的话，可以选择小一点的文件引入Highcharts Standalone Framework这个压缩后只有2k的大小
但是对于文件的引入有一点需要说明
Highchart插件中用到了jquery，当时jquery-1.8.3.js的引入顺序放到了highchart插件js的下面，
导致当加载highchart插件用到的js时，找不到jquery的js，报出某个js的函数不合法
因此 jquery的js要在引入highchart的js之前引入

对于上面的图片，我还引用到了一个主题js文件，



准备工作基本就是这些，下面说说highCharts的使用吧

highCharts具有特别的大的可定制性，这里的一张图大概就可以说明的highCharts的定制型，以及我们可以修改的地方



具体的一些修改细节，大家可以看看highCharts中文网http://www.hcharts.cn/
对于highCharts的使用和配置大家也可以参考下中文网中的教程。说的都十分非常的详细
这里我拿我其中的一个简单的demo，加注释展示下：
前端页面展示：



这个是设定了图表的宽度和高度，当然我们也可以不设置，但是如果设置了div的高度和宽度的时候我们就需要给ion-content设置可以 横向滚动的属性。
这里面我们主要是通过id去标识，底层通过canvas去绘画出来的
后面controller的代码：

$(function(){
$('#containerSimple1').highcharts({//图表展示容器，与div的id保持一致
chart:{
type:'column'//指定图表的类型，默认为直线型（line）
},
title:{
text:'测试使用HightCharts'//指定图表的标题
},
xAxis:{
categories:['my','first','highChart']//指定x轴分组
},
yAxis:{
title:{
text:'something'//指定y轴标题
}
},
series:[//指定数据列，数据名和数据
{name:'ECharts',data:[12,5,6]},
{name:'chartJs',data:[8,4,5]},
{name:'ECharts',data:[2,5,6]},
{name:'chartJs',data:[1,4,5]},
{name:'ECharts',data:[2,7,4]}
]
});
});

其实highCharts的使用就是这么简单。
一句话概括就是图表样式全部的可定制，设置在上面还可以添加各种的事件监听。点击事件、加载后事件、图表重绘事件等等。
图表还是要玩，多玩玩多改改，自己喜欢的样子自然就出来了
下面稍微的整理了下在使用highCharts过程中我们会遇到的一些问题：
Error #10
对数轴的值不能为 0 或负数
下述情况下会发生这个错误：
• 在对数坐标轴中出现值为 0 或负数的情况
• 对数轴的最小值为0 或 小于 0
• 阀值（threshold）设置为 0 或小于 0
Error #12
数据量超过
Error #13
图表 div 渲染容器不存在
Error #14
数据类型错误，需要的是Number类型，传入的却是String
Error #15
未排序的数据
Error #16
Highcharts 重复定义
Error #17
指定的数据列类型不存在
Error #18
指定的数轴不存在
Error #19
坐标轴间隔过多
Error #20
无法将对象点配置添加到长数据序列