Question

首先，抱歉我的英语不好。

我可以动态地在不同的div中创建DBCont个数字图表。像这样：

 $(function() {
    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        for (var g = 0; g <= DbCount; g++)
        {
            var $container = $('<div id="div' + g + '" style="width: 400px; height: 200px;"></div>').appendTo(document.body);
            new Highcharts.Chart({
                chart: {
                    renderTo: $container[0],
                    type: 'areaspline',
                    marginRight: 10,
                    zoomType: 'x',
                    spacingRight: 20,
                    events: {
                        load: function() {
                            var series = this.series[0];
                            var series2 = this.series[1];
                            setInterval(function() {
                                var x = (new Date()).getTime(),
                                        y1 = UsageGrafik[g],
                                        y2 = UsageGrafik2[g];
                                if (y1 > 120 || y2 > 120 || isNaN(y1) || isNaN(y2)) {
                                    y1 = 1;
                                    y2 = 1;
                                }
                                series.addPoint([x, y1], false, true);
                                series2.addPoint([x, y2], true, true);
                            }, 5000);
                            ....

您可以看到这是一张动态图表。我的问题是所有图表的setInterval(function())部分都相同。所以所有图表都有相同的图形。因为UsageGrafik[]数组在ajax的同一页面中每5秒更改一次。基本上，我想创建具有不同setInterval(function())部分的多个图表。或另一种解决方案谢谢

Answer 1

它是由封闭造成的。您有两种选择：

将图表创建到函数中：(function(g) { new Highcharts.Chart(...) })(g)

从定义中移出setInterval：

    new Highcharts.Chart({
        chart: {
            myIndex: g
            renderTo: $container[0],
            events: {
                load: updateChart
            }
        },
        ...
    });

    function updateChart(e) {
                    var series = this.series[0];
                    var series2 = this.series[1];
                    var g = this.userOptions.chart.myIndex;
                    setInterval(function() {
                        var x = (new Date()).getTime(),
                                y1 = UsageGrafik[g],
                                y2 = UsageGrafik2[g];
                        if (y1 > 120 || y2 > 120 || isNaN(y1) || isNaN(y2)) {
                            y1 = 1;
                            y2 = 1;
                        }
                        series.addPoint([x, y1], false, true);
                        series2.addPoint([x, y2], true, true);
                    }, 5000);
                    ....
     }

我可以使用Highcharts创建多个动态购物车

1 个答案: