JS highcharts動態(tài)柱狀圖原理及實現(xiàn)
實現(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)文章
uniapp使用uni-imei插件獲取手機的設(shè)備號
uniapp框架是一款開發(fā)跨平臺應(yīng)用的工具,它支持iOS、Android以及Web等多個平臺,在這些平臺中,uniapp可以訪問某些設(shè)備的硬件信息,這篇文章主要給大家介紹了關(guān)于uniapp使用uni-imei插件獲取手機設(shè)備號的相關(guān)資料,需要的朋友可以參考下2024-01-01純js實現(xiàn)div內(nèi)圖片自適應(yīng)大小(已測試,兼容火狐)
純js實現(xiàn)在img圖片大小未知,div大小未知的情況下,讓圖片自適應(yīng)大小,需要的朋友可以參考下2014-06-06js中scrollTop()方法和scroll()方法用法示例
這篇文章主要介紹了js中scrollTop()方法和scroll()方法用法,結(jié)合實例形式分析了scrollTop()方法和scroll()方法滾動操作的用法與相關(guān)操作技巧,需要的朋友可以參考下2016-10-10js實現(xiàn)簡易的單數(shù)字隨機抽獎(0-9)
這篇文章主要介紹了js實現(xiàn)簡易的單數(shù)字0-9隨機抽獎,可以控制抽取隨機數(shù)開始與停止,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-08-08