Highcharts 将变量传递给工具提示

debugcn 发表于 Dev

卢克雷纳

嗨，我正在尝试使用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[]数组中。

我已尽力解释我正在尝试做的事情，在我的脑海中，解释是有道理的，但如果对您不满意，请告诉我。预先感谢您的任何帮助。

沃伊切赫·奇米尔

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

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

获得悬停点索引： 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']
    ]
  }],
});

演示：