JS highcharts動(dòng)態(tài)柱狀圖原理及實(shí)現(xiàn)
實(shí)現(xiàn)一個(gè)柱狀圖，這個(gè)柱狀圖的高度在不停的刷新，效果如下：
官網(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='http://www.cgvv.com.cn/bcjs/jquery.min.js'></script><script language='javascript' type='text/javascript' src='http://www.cgvv.com.cn/bcjs/highcharts.js'></script><script language='javascript' type='text/javascript' src='http://www.cgvv.com.cn/bcjs/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 style='width: 800px;height: 400px'></div></body></html>
同樣，繪制這個(gè)圖需要的也是雙維數(shù)組，我嘗試了幾個(gè)方法，使用 series.setData(data); 可是實(shí)現(xiàn)數(shù)據(jù)的重新指定！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 用xslt+css讓RSS顯示的跟網(wǎng)頁(yè)一樣漂亮2. ASP.NET MVC把數(shù)據(jù)庫(kù)中枚舉項(xiàng)的數(shù)字轉(zhuǎn)換成文字3. 《CSS3實(shí)戰(zhàn)》筆記--漸變?cè)O(shè)計(jì)（一)4. Ajax實(shí)現(xiàn)異步加載數(shù)據(jù)5. 測(cè)試模式 - XSL教程 - 56. ASP.NET Core自定義中間件的方式詳解7. html5手機(jī)觸屏touch事件介紹8. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫(huà)特效9. 讓chatgpt將html中的圖片轉(zhuǎn)為base64方法示例10. 教你JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata)
網(wǎng)公網(wǎng)安備