highcharts 是一个很出色的js绘图程序,他的的共享数据提示框配置了shared后会把所有坐标值显示出来,而这时候有些为0的值我们不需要,这回造成一些迷惑,看起来也比较乱,可通过以下配置解决
01 | tooltip: { |
02 | crosshairs:[ |
03 | { |
04 | enabled:true, //是否显示X轴标线 |
05 | width:3, //标线宽度 |
06 | color: 'red' //标线颜色值 |
07 | }, |
08 | { |
09 | enabled:true, //是否显示Y轴标线 |
10 | width:3, //标线宽度 |
11 | color: 'green' //标线颜色值 |
12 | } |
13 | ], |
14 | shared: true, //共享数据提示框 |
15 | useHTML:true, //使用HTML |
16 | formatter: function () { |
17 | var formatterName = this.x; //首先显示X坐标轴的值 |
18 | for ( var i = 0 ;i { |
19 | if (this.points[i].y!= "0" ) |
20 | formatterName += "" + "<span style=" color: ' + this.points[i].series.color + ' ; ">" + this.points[i].series.name + ":" |
21 | + this.points[i].y + '个</span>' ; |
22 | } |
23 | return formatterName; |
24 | } |
25 | }, |
效果图如下:
转错工单类目有很多数据,但是仅有一条数据是存在数值的