电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JS highcharts動態柱狀圖原理及實現

瀏覽:136日期:2024-04-16 08:49:05

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

JS highcharts動態柱狀圖原理及實現

官網是沒有動態刷新的示例的,由于需要我查看了其源碼,并根據之前示例做出了動態柱狀圖的效果,希望對同學們有用!

看一下代碼:

<%@ page language='java' import='java.util.*' pageEncoding='UTF-8'%><html><head><title>Highcharts Example</title><script language='javascript' type='text/javascript' src='http://www.hdgsjgj.cn/bcjs/jquery.min.js'></script><script language='javascript' type='text/javascript' src='http://www.hdgsjgj.cn/bcjs/highcharts.js'></script><script language='javascript' type='text/javascript' src='http://www.hdgsjgj.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小強制作</b>’},xAxis: {categories: [’Apples’, ’Oranges’, ’Pears’, ’Grapes’, ’Bananas’]},yAxis: {min: 0,title: {text: ’當前產值’},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>

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 制氮设备-变压吸附制氮设备-制氧设备-杭州聚贤气体设备制造有限公司 | 胀套-锁紧盘-风电锁紧盘-蛇形联轴器「厂家」-瑞安市宝德隆机械配件有限公司 | FFU_空气初效|中效|高效过滤器_空调过滤网-广州梓净净化设备有限公司 | 耐破强度测试仪-纸箱破裂强度试验机-济南三泉中石单品站 | 天长市晶耀仪表有限公司| 深圳高新投三江工业消防解决方案提供厂家_服务商_园区智慧消防_储能消防解决方案服务商_高新投三江 | 网优资讯-为循环资源、大宗商品、工业服务提供资讯与行情分析的数据服务平台 | PU树脂_水性聚氨酯树脂_聚氨酯固化剂_聚氨酯树脂厂家_宝景化工 | 上海新光明泵业制造有限公司-电动隔膜泵,气动隔膜泵,卧式|立式离心泵厂家 | 转子泵_凸轮泵_凸轮转子泵厂家-青岛罗德通用机械设备有限公司 | 广东西屋电气有限公司-广东西屋电气有限公司 | 广州工业氧气-工业氩气-工业氮气-二氧化碳-广州市番禺区得力气体经营部 | 数字展示在线_数字展示行业门户网站| 欧景装饰设计工程有限公司-无锡欧景装饰官网 | 钢绞线万能材料试验机-全自动恒应力两用机-混凝土恒应力压力试验机-北京科达京威科技发展有限公司 | 恒温恒湿试验箱厂家-高低温试验箱维修价格_东莞环仪仪器_东莞环仪仪器 | 网络推广公司_网络营销方案策划_企业网络推广外包平台-上海澜推网络 | 电子海图系统-电梯检验系统-智慧供热系统开发-商品房预售资金监管系统 | 欧必特空气能-商用空气能热水工程,空气能热水器,超低温空气源热泵生产厂家-湖南欧必特空气能公司 | 仿真茅草_人造茅草瓦价格_仿真茅草厂家_仿真茅草供应-深圳市科佰工贸有限公司 | 开业庆典_舞龙舞狮_乔迁奠基仪式_开工仪式-神挚龙狮鼓乐文化传媒 | 接地电阻测试仪[厂家直销]_电缆故障测试仪[精准定位]_耐压测试仪-武汉南电至诚电力设备 | 太平洋亲子网_健康育儿 品质生活 | 丁基胶边来料加工,医用活塞边角料加工,异戊二烯橡胶边来料加工-河北盛唐橡胶制品有限公司 | 磁力加热搅拌器-多工位|大功率|数显恒温磁力搅拌器-司乐仪器官网 | 杭州顺源过滤机械有限公司官网-压滤机_板框压滤机_厢式隔膜压滤机厂家 | 不锈钢水箱厂家,不锈钢保温水箱-山东桑特供水设备 | 铁艺,仿竹,竹节,护栏,围栏,篱笆,栅栏,栏杆,护栏网,网围栏,厂家 - 河北稳重金属丝网制品有限公司 山东太阳能路灯厂家-庭院灯生产厂家-济南晟启灯饰有限公司 | 铁艺,仿竹,竹节,护栏,围栏,篱笆,栅栏,栏杆,护栏网,网围栏,厂家 - 河北稳重金属丝网制品有限公司 山东太阳能路灯厂家-庭院灯生产厂家-济南晟启灯饰有限公司 | 钢化玻璃膜|手机钢化膜|钢化膜厂家|手机保护膜-【东莞市大象电子科技有限公司】 | elisa试剂盒-PCR试剂盒「上海谷研实业有限公司」 | LED灯杆屏_LED广告机_户外LED广告机_智慧灯杆_智慧路灯-太龙智显科技(深圳)有限公司 | 过滤器_自清洗过滤器_气体过滤器_苏州华凯过滤技术有限公司 | 珠海白蚁防治_珠海灭鼠_珠海杀虫灭鼠_珠海灭蟑螂_珠海酒店消杀_珠海工厂杀虫灭鼠_立净虫控防治服务有限公司 | 湖南成人高考报名-湖南成考网 | 砖机托板价格|免烧砖托板|空心砖托板厂家_山东宏升砖机托板厂 | 对夹式止回阀_对夹式蝶形止回阀_对夹式软密封止回阀_超薄型止回阀_不锈钢底阀-温州上炬阀门科技有限公司 | 电脑知识|软件|系统|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网 | 双工位钻铣攻牙机-转换工作台钻攻中心-钻铣攻牙机一体机-浙江利硕自动化设备有限公司 | 热缩管切管机-超声波切带机-织带切带机-无纺布切布机-深圳市宸兴业科技有限公司 | 不锈钢酒柜|恒温酒柜|酒柜定制|酒窖定制-上海啸瑞实业有限公司 |