javascript - 将多个值动态添加到高图中条形图的单点

Question

我想知道是否有人知道 jsfiddle 示例，其中在单个点上具有多个值的堆叠条形图在创建后被更改。我已经看到很多将 setData 用于系列中的单个点的示例，但没有用于多个示例。

我目前有以下图表，并想在每个点上放置多个值。

window.jQuery(function () {
    //var opportunities_by_month_chart;
    opportunities_by_month_chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Pipeline By Month By Outcome'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ['test', 'test2']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Opportunity size in £'
            }
        },
        tooltip: {
            formatter: function () {
                return 'Month: ' + this.x + '<br/>' +
                    this.series.name + ': £' + this.y + '<br/>' +
                    'Total: £' + this.point.stackTotal;
            }
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        credits: {
            enabled: false
        },
        series: [{
                name: 'Closed Won',
                data: [],
                color: 'green'
            }, {
                name: 'Closed Postponed',
                data: [],
                color: 'orange'
            }, {
                name: 'Closed Lost',
                data: [],
                color: 'red'
            }, {
                name: 'Other',
                data: [],
                color: 'blue'
            }
        ]
    });

});

http://jsfiddle.net/9FyGX/2/

如果有人可以指出一个例子或向 jsfiddle 添加一个例子，那会让我很开心：D

Answer 1

如你所说

chart.series[0].setData([1, 2, 3, 4], true);
chart.series[1].setData([2, 3, 4], true);

将工作。但是，最后一个参数 (true) 告诉 highcharts 重新绘制图表。因此使用 false 调用第一个 setData 会更有效，并且只有在添加完数据后才重新绘制。

chart.series[0].setData([1, 2, 3, 4], false);
chart.series[1].setData([2, 3, 4], true);