highcharts tooltip shared formatter 如何仅显示非0的数值，并显示对应的颜色

最新推荐文章于 2022-01-17 10:44:21 发布

转载最新推荐文章于 2022-01-17 10:44:21 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/24178

本文介绍如何在Highcharts中通过自定义tooltip formatter来过滤坐标值为0的数据点，从而优化图表展示效果。通过实现这一功能，可以避免共享数据提示框中出现不必要的零值信息，使图表更加清晰易读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

highcharts 是一个很出色的js绘图程序，他的的共享数据提示框配置了shared后会把所有坐标值显示出来，而这时候有些为0的值我们不需要，这回造成一些迷惑，看起来也比较乱，可通过以下配置解决

 
    01tooltip: {

    02crosshairs:[

    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&#91;i&#93;.series.color + ';">" + this.points[i].series.name + "：" 

    21 + this.points[i].y + '个</span>'; 

    22}

    23 return formatterName; 

    24}

    25},