javascript - 如何访问 highchart 工具提示中的任何特定数据？

Question

我正在使用 highcharts 来显示图表。

我在工具提示中显示时间时遇到问题。

如果我在系列数据对象的数据对象中发送时间，它会正确显示，但反之则不然。

var renderchart = function (seriesData) {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'barGrpahcontainer',
            type: 'bar',
            backgroundColor: '#d3d3d3',
            animation: false
        },
        title: {
            text: ''
        },
        xAxis: {
            opposite: false,
            categories: null,
            title: {
                text: ''
            },
            labels: {
                enabled:false
            }
        },
        yAxis: {
            min: 0,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            title: {
                text: ''
            },
            opposite: true
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + this.y + '<br/>' + 'Time: ' + this.time;
            }
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                pointWidth: 20
            }
        },
        series: seriesData
    });
}

var dataArray = [{"status":"Program Running","y":0.08,"color":"#01BC01","time":"00:13:47"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:03:41"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:36"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:28"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:14"},{"status":"Program Stopped","y":0.04,"color":"#FEC201","time":"00:07:45"},{"status":"Program Running","y":0.21,"color":"#01BC01","time":"00:37:43"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:47"},{"status":"Program Running","y":0.13,"color":"#01BC01","time":"00:24:00"},{"status":"Program Stopped","y":0.01,"color":"#FEC201","time":"00:01:55"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:36"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:19"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:16"},{"status":"Program Stopped","y":0.05,"color":"#FEC201","time":"00:08:52"},{"status":"Program Running","y":0.21,"color":"#01BC01","time":"00:37:46"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:02:53"},{"status":"Program Running","y":0.13,"color":"#01BC01","time":"00:24:03"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:03:24"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:50"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:11"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:09"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:21"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:20"},{"status":"Program Stopped","y":1.67,"color":"#FEC201","time":"05:00:27"},{"status":"NO DATA","y":5.26,"color":"#444849","time":"15:47:37"}]


$(function () {
    var data = dataArray;
    var seriesData = [];
    var total = 0;
    var i, cat;
    var count = 0;

    for (i = 0; i < data.length; i++) {
        seriesData.push({
            name: data[i].status,
            data: [data[i].y],
            color: data[i].color,
            time: data[i].time
        });
    }

    var chart;
    $(document).ready(function () {
        renderchart(seriesData)
    });
});

Answer 1

原因是参数，它保存在 this.series.options.time 而不是 this.time 中。

固定格式器:

 tooltip: {
  formatter: function() {
    return '<b>' + this.series.name + '</b><br/>' +
      this.y + '<br/>' +
      'Time: ' + this.series.options.time;
  }
},

演示:

• http://jsfiddle.net/vwdzxawv/