javascript - Highcharts 多个系列的自定义工具提示

Question

我正在构建一个最多可以包含 5 种不同类型的数据系列的图表。我将类似的系列放在一起，因此不同的系列会有 3 个不同的 y 轴。

我遇到的问题是我无法将其中一个系列的工具提示更改为 On或 Off如果值为 100或 0 .

目前我使用的是共享工具提示，但每个数据系列都有自己的工具提示。 5 个中的 4 个仅在工具提示上使用前缀/后缀，例如 % , amps , psig等

不幸的是，我无法通过将工具提示更改为打开或关闭来使其工作。这是我试过的。

dataSeries.push({

    name: currData['name'],
    type: 'line', // Type of visual display
    width: 0.4,
    yAxis: currData['yAxis'],
    data: currData['series'],
    tooltip: {

        pointFormat: '{series.marker} {series.name}: ' + ('{value}' == 100 ? '<b>On</b><br />' : '<b>Off</b><br />')


        //valueSuffix: '{value}' === 100 ? 'On' : 'Off'

        formatter: function () {
            // Cant get any of these to work
            return '{value}' == 100 ? 'On' : 'Off';
            return this.y == 100 ? 'On' : 'Off';
            return this.point.y == 100 ? 'On' : 'Off';

        }
    }
    //zones: currData['seriesZones'],       
}

我不想使用全局工具提示格式化程序，因为我已经将工具提示格式构建到每种不同的类型中，这些类型在传递多个数据系列时与 switch 语句相关联。

使用这段代码

pointFormatter: function () {
   var point = this;
   return point.series.name + ': ' + (point.y > 0 ? 'On' : 'Off') + '<br/>'
}

它不会在工具提示上显示标记。

Answer 1

扩展 Grzegorz 的解决方案以包括显示标记:

  tooltip: {
    pointFormatter: function() {
      var point = this;
      return '<span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': <b>' + (point.y > 0 ? 'On' : 'off') + '</b><br/>';
    }
  }

http://jsfiddle.net/0u915g9b/1/

请注意，默认 html 显示在文档中:http://api.highcharts.com/highcharts/series%3Cline%3E.tooltip.pointFormatter