HighChart學(xué)習(xí)-更新數(shù)據(jù)data Series與重繪

發(fā)布時(shí)間：2020-08-17 14:28:45 來源：網(wǎng)絡(luò) 閱讀：917 作者：gloomyfish 欄目：web開發(fā)

一：HighChart介紹

基于JQuery的純JavaScript的圖標(biāo)庫(kù)，支持各種圖表顯示，同時(shí)還支持Mootools

與Prototype詳細(xì)版本支持在這里：

JQuery	1.3.2 - 1.9.x. 2.0.x for modern browsers
Mootools	1.2.5 - 1.4.5
Prototype	1.7

支持目前市場(chǎng)幾乎所有的主要瀏覽器IE, Chrome, FF,Safari, Opera等。其圖形渲染完

全是是基于SVG與VML方式，其中VML方式主要是兼容IE瀏覽器，在IE9+及其它瀏覽

器上渲染技術(shù)都是基于SVG方式。下載與安裝指導(dǎo)文檔

->http://docs.highcharts.com/#home安裝好以后，建一個(gè)基本static web 項(xiàng)目，如圖

所示：

HighChart學(xué)習(xí)-更新數(shù)據(jù)data Series與重繪

二：HighChart基本的Bar Chart演示

打開鏈接->http://docs.highcharts.com/#your-first-chart

拷貝your first chart中第二步中的全部script腳本到mydemo.html中的<script></script>

之間。導(dǎo)入JQuery與highchart庫(kù)文件支持。代碼如下：

<scriptsrc="static/jquery-1.9.1/jquery-1.9.1.min.js"></script>

<scriptsrc="static/highcharts-3.0.1/js/highcharts.js"></script>

在tomcat中部署demo1之后訪問如下URL：http://localhost:8080/demo1/mydemo.html

在瀏覽器中看到如下Bar Chart：

HighChart學(xué)習(xí)-更新數(shù)據(jù)data Series與重繪

三：清除HighChart中的數(shù)據(jù)集(remove data series from high chart object)

代碼修改：

1. 把type：’bar’ 改成type: ’column’ 其作用是讓bar垂直顯示

2. 向script尾部追加如下代碼，自動(dòng)清除所有series然后刷新

setTimeout(function(){

var series=chart.series;

while(series.length > 0) {

series[0].remove(false);

}

chart.redraw();

},2000);

四：向HighChart中添加data series(add new data series into high chart object)

向script的尾部追加如下代碼，實(shí)現(xiàn)添加data series并刷新bar chart

setTimeout(function(){

chart.addSeries({

id:1,

name:"gloomyfish",

data:[1,2,3]

},false);

chart.addSeries({

id:2,

name:"wang-er-ma",

data:[5,2,1]

},false);

chart.addSeries({

id:3,

name:"zhang-san",

data:[4,8,6]

},false);

chart.redraw();

},2000);

addSeries方法中第二個(gè)參數(shù)false表示不重繪plot，等所有series添加完成調(diào)用redraw

方法重繪。

五：在chart中清除high chart官方鏈接(remove high chart official hyperlink in chart)

仔細(xì)觀察在Bar Chart的右下角有個(gè)highchart的官方鏈接，當(dāng)然希望去掉，只要在chart

聲明中將credits聲明設(shè)置改為false即可。代碼如下：

credits: {enabled: false// remove high chart logo hyper-link},

六：完整Demo源碼

<html> <head> <script src="static/jquery-1.9.1/jquery-1.9.1.min.js"></script> <script src="static/highcharts-3.0.1/js/highcharts.js"></script> <title>My Demo 1</title> 	<script> 		$(function() { 			var chart; 			 			// initialization chart and actions 		    $(document).ready(function () { 		        chart = new Highcharts.Chart({ 				    chart: { 				    	renderTo: 'my_container', 				        type: 'column' 				    }, 				    title: { 				        text: 'Fruit Consumption' 				    }, 				    xAxis: { 				        categories: ['Apples', 'Bananas', 'Oranges'] 				    }, 				    yAxis: { 				        title: { 				            text: 'Fruit eaten' 				        } 				    }, 		        	credits: { 		        		enabled: false // remove high chart logo hyper-link 		        	}, 				    series: [{ 				        name: 'Jane', 				        data: [1, 0, 4] 				    }, { 				        name: 'John', 				        data: [5, 7, 3] 				    }] 				}); 		         		        // JQuery, mouse click event bind with dom buttons 		        $('#clear-button').on('click', function (e) { 		        	clearPlot(); 		        }); 		         		        $('#refresh-button').on('click', function (e) { 		        	refreshPlot(); 		        }); 		    }); 		     		    // clear all series of the chart 		    function clearPlot() { 		    	//console.log("clear plot data!!!"); 	            var series=chart.series;	             	            while(series.length > 0) { 	                series[0].remove(false); 	            } 	            chart.redraw(); 		    }; 		     		    function refreshPlot() { 		    	//console.log("refresh plot data!!!");             	chart.addSeries({                                 			id:1,         			name: "gloomyfish",         			data: [1,2,3]         		}, false);             	chart.addSeries({                                 			id:2,         			name: "wang-er-ma",         			data: [5,2,1]         		}, false);             	chart.addSeries({                                 			id:3,         			name: "zhang-san",         			data: [4,8,6]         		}, false);             	 	            chart.redraw(); 		    }; 		                 setTimeout(function(){ 	            var series=chart.series;	             	            while(series.length > 0) { 	                series[0].remove(false); 	            } 	            chart.redraw();             },2000); 		     		    // add new series for the chart             setTimeout(function(){             	chart.addSeries({                                 			id:1,         			name: "gloomyfish",         			data: [1,2,3]         		}, false);             	chart.addSeries({                                 			id:2,         			name: "wang-er-ma",         			data: [5,2,1]         		}, false);             	chart.addSeries({                                 			id:3,         			name: "zhang-san",         			data: [4,8,6]         		}, false);             	 	            chart.redraw();             },2000); 		}); 	</script> </head> <body> <h2>High Chart Demo 1</h2> <div id="my_container" style="width:600px; height:600px;"></div> <div id="btn-group"> 	<button type="button" id="clear-button">Clear Plot</button> 	<button type="button" id="refresh-button">Draw Plot</button> </div> </body> </html>

運(yùn)行效果如下：

HighChart學(xué)習(xí)-更新數(shù)據(jù)data Series與重繪

向AI問一下細(xì)節(jié)

HighChart學(xué)習(xí)-更新數(shù)據(jù)data Series與重繪

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽