1

首先，我是一个 JavaScript 新手，所以请多多包涵。我有以下脚本来使用 Highchart 框架绘制饼图

$(function() {
    var options = {
        colors: ["#66CC00", "#FF0000", "#FF6600"],
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: true
        },
        title: {
            text: 'Host Status'
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.point.name + '</b>: ' + this.total;
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'service status',
            data: []
        }]
    }

    var chart;
    options.series.data.push('['
    Service Ok ',   45.0]')
    $(document).ready(function() {
        chart = new Highcharts.Chart(options)
    });

});​

我想要做的是将值series.data作为对象数组动态加载到数组中。这里做错了什么，有没有更好的方法将数据加载到数据数组中？

4

5 回答 5

5

series属性是一个数组，因此您需要像这样编写它（将单个数据点添加到该系列）：

options.series[0].data.push( ["Service Ok", 45.0 ]);

我在看这个 JS Fiddle。

于 2012-05-17T08:31:35.810 回答
4

你的代码有一个错误：
你说你想动态加载值，对吗？
但是您的代码只是设置初始系列数据，然后渲染它。
因此，在您的情况下，如果您想“动态地”更改您的系列数据，您必须销毁当前图表，更新它的数据，然后再次渲染它。可能你损失性能。

正确的做法是使用 highstock api，不要手动更新。如果这样做，在使用图表缩放时可能会出现一些错误，因为要更新图表点，此 api 必须再次计算点，并且它是在您使用上述函数时生成的。
正如您在系列参考中看到的那样要更新图表数据，您必须使用以下功能：
设置新数据：chart.series[0].setData(newData, redraw); 示例
添加新点：chart.series[0].addPoint(arrayOfPoints, redraw); 示例

看这个小提琴，这里我手动更新图表系列，不使用api函数，会发生什么？没有。

为了获得最佳性能，您可以使用以下代码：

    function createChart() {
        chart = new Highcharts.Chart(options);
    }

    // when you want to update it's data
    $(element).yourEvent(function() {
        var newData = ['Service Ok', 50.0];
        if(chart.hasRendered) {
            chart.series[0].setData(newData, true);
        } else {
            // only use it if your chart isn't rendered
            options.series[0].data.push(newData);
            createChart();
        }
    });

$(function() {
    var options = {
        colors: ["#66CC00", "#FF0000", "#FF6600"],
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: true
        },
        title: {
            text: 'Host Status'
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.point.name + '</b>: ' + this.total;
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'service status',
            data: ['Service Ok ',   45.0]
        }]
    }

    var chart;
    $(document).ready(function() {
        createChart();
    });
});​
于 2012-05-17T17:23:48.770 回答
1

我认为它可能对你有帮助 JavaScript push() 方法规范

和 Highcharts 控制规范

Series是一个对象数组，所以你应该这样做：

options.series[0].data.push(["Service Ok", 45.0 ])

在这种情况下，你会得到

series: [{

    type: 'pie',

    name: 'service status',

    data: [
             ["Service Ok", 45.0 ]
          ]

    }]

带有饼图的演示

于 2012-05-17T08:31:29.320 回答
0

试试这个

$(function() {
var options = {   
    series: [{
        type: 'pie',
        name: 'service status',
        data: []
        }]
};    
    var objData={ "type":'bar','name':'second','data':[]};
    options.series.push(objData);
});​
于 2012-05-17T08:37:32.130 回答
0

尝试

options.series[0]data[0]= 'Service Ok';
options.series[0]data[1]= 45.0;
于 2012-05-17T08:39:08.573 回答