Highcharts如何显示某些工具提示而不显示其他工具提示

Posted 2021-05-05

当将鼠标悬停在图表上时，我需要显示最后两个系列的工具提示。在此示例中，我们的想法是仅显示值1699和1750的工具提示。其余值在悬停鼠标时无法显示任何工具提示。我怎么能做到这一点？我还没有找到任何办法。可能吗？提前致谢。

(function () {
var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750'];
    Highcharts.chart('grafica1', {
        chart: {
            type: 'area',
        },
        title: {
            text: ' '
        },
        xAxis: {
           labels: {
                enabled: true,
                formatter: function () {
                    return categories[this.value];
                }
            },
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'Percent'
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
            split: true
        },
        plotOptions: {
            area: {
                stacking: 'percent',
                lineColor: '#ffffff',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#ffffff',
                }
            }
        },
           series: [{
            name: 'Africa',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: 'L. America',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: 'Oceania',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: 'S-E. Asia',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }, {
            name: 'Japan',
            data: [2, 2, 2, 6, 13, 30, 46]
        }, {
            name: 'China',
            data: [2, 2, 2, 6, 13, 30, 46]
        }, {
            name: 'Near East',
            data: [2, 2, 2, 6, 13, 30, 46]
        }, {
            name: 'Asian CIS',
            data: [2, 2, 2, 6, 13, 30, 46]
        }, {
            name: 'Russia',
            data: [2, 2, 2, 6, 13, 30, 46]
        }, {
            name: 'East Europe',
            data: [2, 2, 2, 6, 13, 30, 46]
        }, {
            name: 'Central Europe',
            data: [2, 2, 2, 6, 13, 30, 46]
        }, {
            name: 'W. Europe - Nordic',
            data: [2, 2, 2, 6, 13, 30, 46]
        }, {
            name: 'Nordic',
            data: [2, 2, 2, 6, 13, 30, 46]
        }, {
            name: 'N. America',
            data: [2, 2, 2, 6, 13, 30, 46]
        }]
    });
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="grafica1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

答案

你可以像这样使用formatter：

    tooltip: {
        formatter: function() {
          if(this.points[0].key < (this.points[0].series.xData.length -2)){
                return false;
          }
          var s = [];
          s.push(this.x);
          this.points.forEach(function(point) {
            s.push('<b>' + point.series.name + '</b>: ' + point.y);
          });

          return s;
        },
        split: true
    },

Fiddle

不是最干净的代码（控制台中仍然有错误），但它的工作。

编辑 关注Deep 3015评论，代码和小提琴更新

另一答案

只有当点具有某些x值时，才可以包装tooltip.prototype.renderSplit方法以显示工具提示。

Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', function (p, labels, points) {
  if (!this.options.showOnLastTwo) {
    return p.call(this, labels, points)
  }

  const point = points[0]

  if (point) {
    const allowedXs = point.series.xData.slice(-2)

    if (allowedXs.includes(point.x)) {
      return p.call(this, labels, points)
    }
  }

  this.destroy()
})

并在工具提示选项中设置showOnLastTwo标志为true：

tooltip: {
  split: true,
  showOnLastTwo: true
},

该标志不是必需的，但换行会全局更改Highcharts，因此它会影响每个图表 - 该标志将阻止这一点。

实例：http://jsfiddle.net/sLvekuht/1/