在工具提示中显示其他信息

Question

我有以下高图图表

https://jsfiddle.net/deemgfay/

我试图显示＆＃34; Consum Test＆＃34;工具提示中的值，但不将它们添加到系列中。我只想添加Consum (l/100km) 系列Total Consum (l)。这可能与hightcharts？请参阅下面的屏幕截图。

Answer 1

您可以在图例中设置要隐藏和忽略的额外系列：

  visible: false,
  showInLegend: false

然后使用工具提示formatter功能（必须启用useHTML）来显示共享工具提示中所有系列的点，无论其可见性如何：

  formatter: function() {
    var html,
      originalPoint = this.points[0];

    // header
    html = "<span style='font-size: 10px'>" + originalPoint.x + "</span><br/>";

    // points
    originalPoint.series.chart.series.forEach(function(series) {
      var point = series.points.find((p) => p.x === originalPoint.point.x);
      html += "<span style='color: " + series.color + "'>\u25CF</span> " + series.name + ": <b>" + point.y + "</b><br/>"
    });

    return html;
  }

现场演示： https://jsfiddle.net/kkulig/1oggzsx0/

API参考：

http://api.highcharts.com/highcharts/tooltip.formatter http://api.highcharts.com/highcharts/tooltip.useHTML

Answer 2

可以使用tooltip.formatter完成此操作。在这里，我根据所需额外数组索引的当前序列索引附加工具提示信息。

formatter: function() {
  var s = '<b>' + this.x + '</b>';
  var reqpoint = 0;
  $.each(this.points, function() {
    var reqpoint = this.point.index
    s += '<br/>' + this.series.name + ': ' +
      this.y.toFixed(2) + 'm';

    if (this.series.index == 1) {
      s += '<br/>Test Consum (l): ' + extraData[reqpoint] + 'm';
    }
  });


  return s;
},

Fiddle演示