将数据动态传递给Highchart

时间:2013-06-04 13:36:20

标签: highcharts

我有以下HighChart代码。我想制作数据&通过对象提供的类别而不是硬编码,以便稍后我可以动态获取数据并分配给对象。请让我知道为此目的需要进行的必要更改。提前谢谢。

$('#stackedChartContainer').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: ['IAS', 'Funding', 'Gilts', 'BuyOut']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Millions'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'right',
                    x: -100,
                    verticalAlign: 'top',
                    y: 20,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        'Total: ' + this.point.stackTotal;
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                        }
                    }
                },
                series: [{
                    name: 'Pensioners',
                    data: [800000000, 904080340, 961576651, 998929115]
                }, {
                    name: 'Deferreds',
                    data: [700000000, 925466733, 1063478804, 1158224555]
                }, {
                    name: 'Active',
                    data: [200000000, 265524863, 305739877, 333386521]
                }]
            });

1 个答案:

答案 0 :(得分:0)

您可以使用addSeries / addPoint / setData函数来修改数据/系列。可以通过setCategories()函数修改类别。所有这些都记录在这里:http://api.highcharts.com/highcharts

如果您想动态获取数据,例如来自服务器/数据库等,您可以使用ajax调用。

这里有一个例子:http://docs.highcharts.com/#preprocessing