通过外部按钮刷新/更新highcharts条形图

时间:2017-11-20 18:17:22

标签: javascript php jquery ajax highcharts

我尝试通过外部按钮从表格(https://www.highcharts.com/demo/column-parsed)重新加载/更新高价条形图数据。

在我的代码中,点击重新加载按钮时,它只能运行一次。如果我更改数据并再次点击重新加载按钮,它仍然无法正常工作。



$(function () {
		    
		    $('#containerbarchart').highcharts({
		        data: {
		            table: document.getElementById('datatable')
		        },
		        chart: {
		            type: 'column'
		        },
		        title: {
		            text: 'Data extracted from a HTML table in the page'
		        },
		        yAxis: {
		            allowDecimals: false,
		            title: {
		                text: 'Units'
		            }
		        },
		        tooltip: {
		            formatter: function() {
		                return '<b>'+ this.series.name +'</b><br/>'+
		                    this.y +' '+ this.x;
		            }
		        },
		        
		       
		        series : [{ id: 'series1' }, { id: 'series2' },{ id: 'series3' }]
		    });
        $("#barchart").click(function() {
		    
		    $("#td1").html(11);
		    $("#td2").html(20);
		    $("#td3").html(15);
		        
		        
		        var complete = function(options) {
		            var chart = $('#containerbarchart').highcharts();
    				var options = chart.options;
    				chart = new Highcharts.Chart(options);
		            var chart = $('#containerbarchart').highcharts();
		            var series1 = chart.get('series1');
		            var series2 = chart.get('series2');
		            var series3 = chart.get('series3');
		            
		            
		            series1.setData(options.series[0].data, false);
		            series2.setData(options.series[1].data, false);
		            series3.setData(options.series[2].data, false);
		            
		            
		            chart.redraw();
		        };
		        
		       
		        Highcharts.data({
		            table : document.getElementById('datatable'),
		            complete : complete
		        });
		    });
		});
&#13;
&#13;
&#13;

0 个答案:

没有答案