Highchart:如何通过单击按钮更新动态图表?

问题描述

我打算在我的网页上放置一个按钮，以便在单击按钮时，一个点将被添加到图表中，而不会重绘整个图表(图表是此 http://www.highcharts.com/demo/dynamic-update ).但是，我当前的代码无法正常工作.

I intend to have a button on my web page so that upon clicking a button, a point will be added to a chart without redrawing the whole chart (the chart is a modified version of this http://www.highcharts.com/demo/dynamic-update). However, my current code is not working.

以下是相关代码: http://jsfiddle.net/wtvaz9gc/7/

var series;

$(function drawCharts(numberOfPoint) {
                    // if(typeof chartData == undefined){
                    //  chartData = $(dataStore.getXml());
                    // }

                    $("#b").click(function(){
            series.addPoint([3,3]);
                })
                    $(document).ready(function () {
                        Highcharts.setOptions({
                            global: {
                                useUTC: false
                            }
                        });

                        $('#container').highcharts({
                            chart: {
                                type: 'line',
                                animation: Highcharts.svg, // don't animate in old IE
                                marginRight: 10,
                                events: {
                                    load: function () {
                                        series = this.series[0];
                                        // window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y;
                                        // console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y);
                                    },
                                }
                            },
                            title: {
                                text: ''
                            },
                            xAxis: {
                                title: {
                                   text: 'Jahre'
                                },
                            //    gridLineWidth: 0,
                             //   lineWidth:1,
                                startOnTick: true,
                                tickPixelInterval: 40,
                                min: 0,
                                max: 10,
                                plotLines: [{
                                    value: 0,
                                    width: 1,
                                    color: '#808080'
                                }]
                            },

                            yAxis: {
                                title: {
                                    text: 'Vermögen(in EUR)'
                                },
                                labels: {
                                    enabled: true
                                },
                                min: 0,
                                max: 100,
                                plotLines: [{
                                    value: 0,
                                    width: 1,
                                    color: '#808080'
                                }]
                            },
                            tooltip: {
                                enabled : false,
                                formatter: function () {
                                    return '<b>' + this.series.name + '</b><br/>' +
                                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                    Highcharts.numberFormat(this.y, 2);
                                }
                            },
                            legend: {
                                enabled: false
                            },
                            exporting: {
                                enabled: false
                            },
                            series: [{
                                name: 'Random data',
                                data: ($(function () {
                                // generate an array of random data
                                var data = [],
                                time = (new Date()).getTime(),
                                i, preValue;

                                for (i = 0; i < numberOfPoint; i += 1) {
                                    if(i == 0){
                                        data.push({
                                            x: i,
                                            y: 10
                                        });
                                    } else {
                                        data.push({
                                            x: i,
                                            y: chartData["wealth"][0][i]
                                        });
                                    }
                                }
                                // showMsg(data);
                                // console.log(data);
                                return data;
                            }()))
                            }]
                        });
                    });
                });

当我尝试在chrome中运行它时，收到以下错误报告:highcharts.js:未捕获的TypeError:i.splice不是函数addPoint @ highcharts.js:...

When I tries to run it in chrome, I got the following error report:highcharts.js:Uncaught TypeError: i.splice is not a functionaddPoint @ highcharts.js:...

在这种情况下，应如何使用函数"addPoint"?还是应该使用其他方法来达到目的?

How should I use the function "addPoint" in this case?Or should I use other method to achieve the purpose?

推荐答案

生成初始数据的函数存在问题，但是addPoint可以正常工作:

There is something wrong with the function generating your initial data, but addPoint is working fine:

var series;

$(function drawCharts(numberOfPoint) {
						// if(typeof chartData == undefined){
						// 	chartData = $(dataStore.getXml());
						// }

						$("#b").click(function(){
                series.addPoint([10,10]);

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

							$('#container').highcharts({
								chart: {
									type: 'line',
		             				animation: Highcharts.svg, // don't animate in old IE
		             				marginRight: 10,
		             				events: {
		             					load: function () {
		             						series = this.series[0];
		                					// window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y;
		                					// console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y);
		                				},
		                			}
		                		},
		                		title: {
		                			text: ''
		                		},
		                		xAxis: {
		                			title: {
         						       text: 'Jahre'
        						    },
        						//    gridLineWidth: 0,
        						 //   lineWidth:1,
		                			startOnTick: true,
		                			tickPixelInterval: 40,
		                			min: 0,
		                			max: 10,
	                				plotLines: [{
		                				value: 0,
		                				width: 1,
		                				color: '#808080'
		                			}]
		                		},

		                		yAxis: {
		                			title: {
		                				text: 'Vermögen(in EUR)'
		                			},
		                			labels: {
     								  	enabled: true
   									},
		                			min: 0,
		                			max: 100,
		                			plotLines: [{
		                				value: 0,
		                				width: 1,
		                				color: '#808080'
		                			}]
		                		},
		                		tooltip: {
		                			enabled : false,
		                			formatter: function () {
		                				return '<b>' + this.series.name + '</b><br/>' +
		                				Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
		                				Highcharts.numberFormat(this.y, 2);
		                			}
		                		},
		                		legend: {
		                			enabled: false
		                		},
		                		exporting: {
		                			enabled: false
		                		},
		                		series: [{
		                			name: 'Random data',
		                			data: [1,2,3]
		                		}]
		                	});
						});
					});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

			<button id="b" href="#" >AddPoints</button>

这篇关于Highchart:如何通过单击按钮更新动态图表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！