JShighcharts動(dòng)態(tài)柱狀圖如何實(shí)現(xiàn)-創(chuàng)新互聯(lián)

本篇文章為大家展示了JS highcharts動(dòng)態(tài)柱狀圖如何實(shí)現(xiàn)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為清澗等服務(wù)建站，清澗等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為清澗企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

實(shí)現(xiàn)一個(gè)柱狀圖，這個(gè)柱狀圖的高度在不停的刷新，效果如下：

JS highcharts動(dòng)態(tài)柱狀圖如何實(shí)現(xiàn)

官網(wǎng)是沒(méi)有動(dòng)態(tài)刷新的示例的，由于需要我查看了其源碼，并根據(jù)之前示例做出了動(dòng)態(tài)柱狀圖的效果，希望對(duì)同學(xué)們有用！

看一下代碼：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
	<head>
		<title>Highcharts Example</title>
		<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
		<script language="javascript" type="text/javascript" src="highcharts.js"></script>
		<script language="javascript" type="text/javascript" src="exporting.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container',
			type: 'column',
			events: {
       load: function() {  
         // set up the updating of the chart each second
         var series = this.series[0];
         setInterval(function() {
          	 var data = [];
          	 data.push(['Apples', Math.random()]);
          	 data.push(['Oranges', Math.random()]);
          	 data.push(['Pears', Math.random()]);
          	 data.push(['Grapes', Math.random()]);
          	 data.push(['Bananas', Math.random()]);
           series.setData(data);
         }, 2000);
       }
     }
		},
		title: {
			text: '<b>Java小強(qiáng)制作</b>'
		},
		xAxis: {
			categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
		},
		yAxis: {
			min: 0,
			title: {
				text: '當(dāng)前產(chǎn)值'
			},
			stackLabels: {
				enabled: true,
				style: {
					fontWeight: 'bold',
					color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
				}
			}
		},
		legend: {
			align: 'right',
			x: -100,
			verticalAlign: 'top',
			y: 20,
			floating: true,
			backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
			borderColor: '#CCC',
			borderWidth: 1,
			shadow: false
		},
		tooltip: {
			formatter: function() {
				return '<b>'+ this.x +'</b><br/>'+
					this.series.name +': '+ this.y +'<br/>'+
					'Total: '+ this.point.stackTotal;
			}
		},
		plotOptions: {
			column: {
				stacking: 'normal',
				dataLabels: {
					enabled: true,
					color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
				}
			}
		},
		series: [{
			name: 'John',
			data: [5, 3, 4, 7, 2]
		}]
	});
});
</script>
	</head>
	<body>
<div id="container" ></div>
	</body>
</html>

文章標(biāo)題：JShighcharts動(dòng)態(tài)柱狀圖如何實(shí)現(xiàn)-創(chuàng)新互聯(lián)
文章源于：http://muchs.cn/article44/hidhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站維護(hù)、自適應(yīng)網(wǎng)站、搜索引擎優(yōu)化、標(biāo)簽優(yōu)化、定制開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容