Highcharts将变量传递给工具提示

Question

嗨，我正在尝试使用setData将变量传递给我的工具提示。

这是我的一段代码，解释了我如何设置图表数据，这段代码还没有将sensorValue传递给我的工具提示：

nitrogenDioxide = [];
$.each(data['NO2'], function(key, value) {
    nitrogenDioxide.push([value.ts * 1000, value.rating]);
});

chart_2_1.series[0].setData(nitrogenDioxide);
chart_2_1.series[0].update({name:'Nitrogen Dioxide'}, true);

这是我用来创建工具提示的代码：

tooltip: {
        shared: true,
        useHTML: true,
        formatter: function () {
            var tooltipcontent = '<b>' + moment.unix((this.points[0].key / 1000)).format("DD/MM/YYYY HH:mm"); + '</b>';
            tooltipcontent += '<table style="width:100%">';

            $.each(this.points, function () {
                console.log(this);
                tooltipcontent += '<tr><td>' + this.y.toLocaleString() + '</td></tr>';
                tooltipcontent += '<tr><td>' + sensorValue + '</td></tr>';
            });

            tooltipcontent += '</table>';
            return tooltipcontent;
        }
    }

如你所见，我的工具提示中有一个名为sensorValue的变量。在foreach循环中，我有一个评级值（y轴）和一个传感器值。我想将传感器值传递给我工具提示。

我已经看到了多种在线方式，但没有一种方法像我一样设置数据，他们这样做：

new Highcharts.Chart( {
...,
series: [ {
    name: 'Foo',
    data: [
        {
            y : 3,
            myData : 'firstPoint'
        },
        {
            y : 7,
            myData : 'secondPoint'
        },
        {
            y : 1,
            myData : 'thirdPoint'
        }
    ]
} ]

} );

我尝试过这样的东西，但不知道如何在工具提示中调用这个额外的值：

nitrogenDioxide = [];
$.each(data['NO2'], function(key, value) {
    nitrogenDioxide.push([value.ts * 1000, value.rating, value.value]);
});

在上面的代码中，我将传感器值推入nitrogenDioxide[]数组。

我尽力解释我想要做什么，在我的脑海里，解释是有道理的，但如果它不对你，请告诉我。预先感谢您的任何帮助。

Answer 1

我希望我能正确理解你的问题，下面发布的演示对你有所帮助。

当传递具有附加值的数组（在您的情况下为sensorValue）时，可以使用以下方法在formatter中检索它：

• 得到悬停点指数：this.point.index
• 使用点索引从this.series.userOptions.data数组中获取其他值

码：

Highcharts.chart('container', {
  tooltip: {
    formatter: function() {
      var point = this.point,
        series = this.series,
        pointIndex = point.index,
        text,
        additionalValue;

      text = '<span style="color:' +
        this.color + '">\u25CF</span> ' +
        series.name +
        ': <b>' +
        this.y +
        '</b><br/>';

      additionalValue =
        series.userOptions.data[pointIndex][2];

      text += '<br> Additional value: ' +
        additionalValue;

      return text;
    }
  },
  series: [{
    data: [
      [1, 2, 'aaa'], // 'aaa' is an additional value
      [2, 5, 'bbb'],
      [3, 9, 'ccc']
    ]
  }],
});

演示：

• https://jsfiddle.net/BlackLabel/3g6om1fw/1/