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）时，可以使用以下方法在内部格式化程序中对其进行检索：

获取悬停点索引：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/

高图将变量传递到工具提示

1 个答案: