Highcharts：动态更新堆叠区域，带有额外的自定义数据

Question

我想使用(jQuery Highchart) Is there any way to put extra custom data inside Tooltip Box?

中提到的技术在堆积区域图表中显示自定义提示信息

图表在初始数据上运行正常，但在动态添加新点时无效。

源代码位于http://jsfiddle.net/ukNPz/1/

$(function () {

var clusterInfoChart;

var clusterOptions = {
    chart: {
        type: 'area',
        renderTo: 'container',
        events: {
            load: function () {
                S = this.series;

                setInterval(function () {

                    var seconds = Math.round(new Date() / 1000);
                    seconds = seconds - 1397529601 + 1235;
                    console.log(seconds);

                    var shift = S[0].data.length > 10;

                    S[0].addPoint([seconds, {
                        y: 1,
                        yinfo: '192.168.119.10:cpuwarn'
                    }], true, shift);
                    S[1].addPoint([seconds, {
                        y: 1,
                        yinfo: '192.168.119.10:cpuwarn'
                    }], true, shift);

                    clusterInfoChart.redraw();
                }, 3000);
            }
        }
    },
    title: {
        text: 'clusterInfo'
    },
    xAxis: {
        categories: [
            '1205', '1210', '1215', '1220', '1225', '1230', '1235'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Events'
        },
        labels: {
            formatter: function () {
                return this.value.y;
            }
        }
    },
    tooltip: {
        formatter: function () {
            return this.point.yinfo.replace(";", "<br>");
        }
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    series: [{
        name: 'Alert',
        data: [

        {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 2,
            yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 2,
            yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 2,
            yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
        }

        ]
    }, {
        name: 'Warn',
        data: [

        {
            y: 0,
            yinfo: ''
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 0,
            yinfo: ''
        }, {
            y: 2,
            yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }, {
            y: 0,
            yinfo: ''
        }, {
            y: 1,
            yinfo: '192.168.119.10:cpuwarn'
        }

        ]
    }]
};

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

clusterInfoChart = new Highcharts.Chart(clusterOptions);
});

Answer 1

这种格式不合适：

[seconds, {
             y: 1,
             yinfo: '192.168.119.10:cpuwarn'
 }]

应该是：

{
             x: seconds,
             y: 1,
             yinfo: '192.168.119.10:cpuwarn'
 }