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开始，否则也会无法显示图表。。。