创建动态图

时间:2013-05-07 06:29:49

标签: javascript graph

我的目标是使用API​​创建动态图表:http://api.highcharts.com/highcharts#Series

方法:setData (Array<Mixed> data, [Boolean redraw])

但是,我在更新图表时遇到了一些问题:

                series: [{
                            name: 'Lunch',
                            data: [49.9, 71.5, 106.4, 129.2, 144.0, 

                                            176.0, 135.6]

                        }, {
                            name: 'Dinner',
                            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 

                                               105.0]

                        }]
                    });
                });

                    // the button action
                $('#button').click(function() {
                    var chart = $('#container').highcharts();
                    chart.series[0].setData([129.2, 144.0, 176.0, 

                                135.6, 148.5, 216.4, 194.1] );
                });

                    </script>
            </head>
            <body>
                <script src="js/highcharts.js"></script>
                <script src="js/modules/exporting.js"></script>

                <div id="container"
                    style="min-width: 400px; height: 400px; 



                                margin: 0 auto"></div>
                <button id="button">Update the data</button>
            </body>
            </html>

请告知使用setData (Array<Mixed> data, [Boolean redraw])方法的适当方法是什么?

1 个答案:

答案 0 :(得分:0)

选中此jsFiddle 以查看应如何实施动态高级图表。您应该使用load函数动态加载数据。例如:

events: {
                load: function() {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function() {
                        var x = (new Date()).getTime(), // current time
                            y = Math.random();
                        series.addPoint([x, y], true, true);
                    }, 1000);
                }
            }