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则是图表的一个配置对象变量，下面主要针对图表的这个配置变量进行讲解。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107

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