在highchart中动态地将多个值添加到条形图的单个点

时间:2013-04-11 08:41:27

标签: javascript graph highcharts

我想知道是否有人知道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

1 个答案:

答案 0 :(得分:0)

正如你所说

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);