highcharts框架使用总结
Highcharts官网地址：https://www.hcharts.cn/products/highcharts
首先需要引入jQuery框架，然后包含Highcharts框架需要使用到的js文件，最新版本5.0.7的js是在code目录下，其中highcharts.js文件是必需的，其他文件根据需要使用的图表需要引入，如果需要使用图表的打印功能的话，需要引入modules/exporting.js文件。
基本使用方法：
在html页面为某个容器元素（如：div）定义一个id，然后在渲染页面的js中调用highcharts框架的方法：
Highcharts.chart(id, option);
其中id是页面某个元素的id，即我们希望图表在页面上展示的位置，option则是图表的一个配置对象变量，下面主要针对图表的这个配置变量进行讲解。
Highcharts.chart(id, {
chart: {//图表配置
type: 'line', //图表默认类型，默认：line(pie：饼图，column，柱状图；line，折线图，funnel：漏斗图...)。
height: null, //图表高度，默认：null，根据容器元素高度计算。
width: null, //图表宽度，默认：null，根据容器元素宽度计算。
backgroundColor: '#FFFFFF', //图表区背景颜色，默认：#FFFFFF。
borderColor: '#335cad', //图表边框颜色，默认：#335cad。
borderWidth: 0, //图表边框宽度，默认：0，需要设置图表边框颜色的话需要将其设置大于0。
borderRadius: 0, //图表边框的圆角半径，默认：0。
margin: [0,0,0,0], //图表外边缘和绘图区域之间的边距，默认：[0,0,0,0](顺序：上右下左)。
polar: false //默认：false。当设置为true时，直线图、曲线图、面积图、柱状图等笛卡尔图会转成极地图,
//例如，蜘蛛图就需要将其设置为true。极地图需要额外的引入highcharts-more.js才能使用。
},
title: {//标题配置
text: 'Chart title', //图表标题文字，默认：Chart title。若不想显示标题可设置为null。
align: 'center', //图表标题水平对齐方式，默认：center，可选：left、center、right。
floating: false, //默认：false，如果设置为true，标题将不占用图表区的位置。
style: { //标题样式配置
color: '#000000',
fontWeight: 'bold',
fontSize: '20px'
}
},
exporting: {//导出配置
enabled:true //是否启用导出模块，默认：true。若想去除图表右上角导出按钮则设置为false。
},
credits: {//版权配置
enabled:true //是否显示版权信息，默认：true。若想去除图表右下角highcharts官网链接则设置为false。
text：'Highcharts.com', //版权信息显示内容，默认：Highcharts.com。
href: '' //版权信息链接地址，默认：http://www.highcharts.com。
},
tooltip: {//数据提示框配置
enabled: true, //是否启用数据提示框，默认：true。
shared: true, //数据提示框共享（一个x轴值对应有多个y轴值时，多个y轴值共享提示框）
backgroundColor: '', //数据提示框背景色，默认：rgba(247,247,247,0.85)。
borderColor: null, //数据提示框边框颜色，默认：null，使用该数据列或该点的颜色。
borderWidth: 1, //数据提示框边框宽度，默认：1。
borderRadius: 3, //数据提示框圆角半径，默认：3。
pointFormat: '', //数据提示框中该点的html代码。变量使用花括号括起来。
pointFormatter: function(){}, //回调函数，返回格式化提示框中该点的html代码。
},
xAxis: {//x轴配置
max: null, //坐标轴最大值，当设置为null时，将会自动计算。
//当endOnTick参数值为true时，max值将会向上取整。
min: null, //坐标轴最小值，当设置为null时，将会自动计算。注意：对数轴最小值不能为0，否则会出错。
//如果设置了startOnTick为true时，最小值可能会进行向下取整。
opposite: false, //是否将坐标轴显示在对立面，默认：false。
//默认情况下x轴在图表下方，y轴在左边，设置为true后，x轴将在上方显示，y轴在右边显示。
type: linear, //坐标轴类型，默认：linear。
//可选：linear(线性轴)、logarithmic(对数轴)、datetime(时间轴)、category(分类轴)
categories: null, //分类坐标轴中的分类，定义x轴刻度显示内容，默认：null。
tickInterval: //间隔多少显示刻度
tickmarkPlacement: 'on', //本参数只对分类轴有效。当值为on时刻度线将在分类上方显示，当值为between时刻度线将
//在两个分类中间显示。当tickInterval为1时，默认是between，其他情况默认是on。
labels: {//坐标轴标签配置
enabled: true, //是否显示坐标刻度值，若不想显示则设置为false。
rotation: -45, //x轴刻度标题旋转一定角度
formatter: function(){}, //回调函数，返回在刻度位置显示的格式化内容。
},
//十字准星线配置
crosshair: true, //若是柱状图直接配置true
crosshair : { //其他图表类型需要配置样式
width: 1,
color: 'gray',
dashStyle: 'Solid'
},
visible: true //是否显示坐标轴，默认：true。包含坐标轴、坐标轴标题、坐标轴轴线、坐标轴标签等。
},
yAxis: {//y轴配置
//配置参数和x轴相同...
},
scrollbar : {//滚动条配置
enabled:true //启用滚动条
},
series: {//数据列配置
cursor: 'pointer', //鼠标在数据列上的形状，默认是箭头，可设置为pointer(手型)。
name: '', //数据列名称，用于在legend(图例)、tooltip(数据提示框)中显示。
data: [{ //数据列数据配置，不同类型的图表数据列配置有所差异，这里示例的是柱状图数据列配置。
x: 1,
y: 5,
name: '',
color: ''
}]
},
legend: {//图例配置
enabled: true, //图例开关，默认：true。
align: 'center', //图例在图表区中的水平对齐方式，默认：center。可选：left、center、right。
backgroundColor: '' //背景颜色
},
plotOptions: {
series: {
marker: {
enabled: true //是否显示折线图上的点（折线图配置）
},
dataLabels: {
enabled: true, //是否在图表上各个数据点显示对应数据
color: '#a3a3a3',
formatter: function() { //格式化
return this.y;
}
}
},
column: {
colorByPoint: true //给柱状图每个点分配颜色（柱状图配置）
}
}
});
问题与方案：
如果数据提示框中需要显示额外的信息，而且这个信息对于不同数据点是不同的，该怎么设置？？
可以在设置图表数据的data中的每个数据点对象添加额外属性，然后使用pointFormatter在回调函数中即可访问到这个额外的属性。
拿我做过的一个实例来说：
热力图表heatmap的data中每个数据点对象原本的格式为：{x:x轴位置, y:y轴位置, value:对应点的值}，我可以在里面加多一个
属性来为每个数据点存放额外的信息，如：tip: 数据点提示语，那么在pointFormatter回调函数中即可使用this.point.tip来访问这个属性了。
特别注意：
1.要确保x轴值和对应y轴值的正确对应，永远不要相信js的数组下标，js使用push方法添加数组元素之后数组中的元素并不是按push的先后顺序来排序的。
2.x轴的min和max表示的是有滚动条的时候一屏显示多少数据，y轴的min和max表示的才是最大最小值。
3.设置全局的scrollbar配置之后，只会在x轴开启滚动条，若想在y轴启用滚动条，需要在yAxis参数下添加配置：
scrollbar: {
enabled: true,
showFull: false
}
4. 大坑：一定要注意series中的data数组里面的元素都必须是数字类型，若是字符串则会一直得不到图表显示。。而且数组的下标一定要从0开始，否则也会无法显示图表。。。
