欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS highcharts動態(tài)柱狀圖原理及實現(xiàn)

 更新時間:2020年10月16日 10:06:03   作者:cuisuqiang  
這篇文章主要介紹了JS highcharts動態(tài)柱狀圖原理及實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

實現(xiàn)一個柱狀圖,這個柱狀圖的高度在不停的刷新,效果如下:

官網(wǎng)是沒有動態(tài)刷新的示例的,由于需要我查看了其源碼,并根據(jù)之前示例做出了動態(tài)柱狀圖的效果,希望對同學(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小強制作</b>'
		},
		xAxis: {
			categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
		},
		yAxis: {
			min: 0,
			title: {
				text: '當前產(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" style="width: 800px;height: 400px"></div>
	</body>
</html>

同樣,繪制這個圖需要的也是雙維數(shù)組,我嘗試了幾個方法,使用 series.setData(data); 可是實現(xiàn)數(shù)據(jù)的重新指定!

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JS中的模糊查詢功能

    JS中的模糊查詢功能

    這篇文章主要介紹了JS中的模糊查詢功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • 微信小程序?qū)崿F(xiàn)簡易計算器

    微信小程序?qū)崿F(xiàn)簡易計算器

    這篇文章介紹了微信小程序?qū)崿F(xiàn)簡易計算器的方法,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • uniapp使用uni-imei插件獲取手機的設(shè)備號

    uniapp使用uni-imei插件獲取手機的設(shè)備號

    uniapp框架是一款開發(fā)跨平臺應(yīng)用的工具,它支持iOS、Android以及Web等多個平臺,在這些平臺中,uniapp可以訪問某些設(shè)備的硬件信息,這篇文章主要給大家介紹了關(guān)于uniapp使用uni-imei插件獲取手機設(shè)備號的相關(guān)資料,需要的朋友可以參考下
    2024-01-01
  • Bootstrap如何創(chuàng)建表單

    Bootstrap如何創(chuàng)建表單

    這篇文章主要為大家詳細介紹了Bootstrap如何創(chuàng)建表單,介紹了Bootstrap表單的三種類型,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • JavaScript?位運算及實際應(yīng)用實例

    JavaScript?位運算及實際應(yīng)用實例

    這篇文章主要為大家介紹了JavaScript位運算及實際應(yīng)用實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • 基于Bootstrap3表格插件和分頁插件實例詳解

    基于Bootstrap3表格插件和分頁插件實例詳解

    這篇文章主要介紹了基于Bootstrap3表格插件和分頁插件實例詳解的相關(guān)資料,需要的朋友可以參考下
    2016-05-05
  • 微信小程序?qū)崿F(xiàn)圖片上傳

    微信小程序?qū)崿F(xiàn)圖片上傳

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)圖片上傳,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-05-05
  • 純js實現(xiàn)div內(nèi)圖片自適應(yīng)大小(已測試,兼容火狐)

    純js實現(xiàn)div內(nèi)圖片自適應(yīng)大小(已測試,兼容火狐)

    純js實現(xiàn)在img圖片大小未知,div大小未知的情況下,讓圖片自適應(yīng)大小,需要的朋友可以參考下
    2014-06-06
  • js中scrollTop()方法和scroll()方法用法示例

    js中scrollTop()方法和scroll()方法用法示例

    這篇文章主要介紹了js中scrollTop()方法和scroll()方法用法,結(jié)合實例形式分析了scrollTop()方法和scroll()方法滾動操作的用法與相關(guān)操作技巧,需要的朋友可以參考下
    2016-10-10
  • js實現(xiàn)簡易的單數(shù)字隨機抽獎(0-9)

    js實現(xiàn)簡易的單數(shù)字隨機抽獎(0-9)

    這篇文章主要介紹了js實現(xiàn)簡易的單數(shù)字0-9隨機抽獎,可以控制抽取隨機數(shù)開始與停止,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2015-08-08

最新評論