文档章节

jQuery Highcharts折线图案例分析

冬瓜1
 冬瓜1
发布于 2015/07/01 16:31
字数 581
阅读 208
收藏 8
php

Highcharts是一款功能非常强大的jQuery图表应用,利用Highcharts可以创建很多外观漂亮而且数据展示灵活的网页图表。本文主要介绍了利用Highcharts实现的折线图,并将部分代码分享给大家。

效果图如下所示:


js脚本引用:

[html] view plaincopy

  1. <script src="Js/Index/jquery-1.5.2.min.js" type="text/javascript"></script>    

  2. <script src="js/Index/raphael.2.1.0.min.js" type="text/javascript"></script>    

  3. <script src="js/Index/justgage.1.0.1.js" type="text/javascript"></script>   

  4. <script src="Js/Index/highcharts.js" type="text/javascript"></script>      

  5. <script src="Js/Index/exporting.js" type="text/javascript"></script>  


定时刷新:

[javascript] view plaincopy

  1. //曲线图    

  2. ar chart;    

  3.  $(document).ready(function() {    

  4.      chart = new Highcharts.Chart({    

  5.          chart: {    

  6.              renderTo: 'divChart',          //放置图表的容器    

  7.              plotBackgroundColor: null,    

  8.              plotBorderWidth: null,    

  9.              defaultSeriesType: 'line'    

  10.          },    

  11.          title: {    

  12.              text: '24小时负荷曲线'    

  13.          },    

  14.          subtitle: {    

  15.              text: ''    

  16.          },    

  17.          xAxis: {//X轴数据    

  18.              categories: ['00','01''02','03''04','05''06','07''08','09''10','11''12','13''14','15''16','17''18','19''20','21''22','23'],    

  19.   

  20.              labels: {    

  21.                  rotation: -45, //字体倾斜    

  22.                  align: 'right',    

  23.                  style: { font: 'normal 12px 宋体' }    

  24.              }    

  25.          },    

  26.          yAxis: {//Y轴显示文字    

  27.              title: {    

  28.                  text: 'MW'    

  29.              }    

  30.          },    

  31.          tooltip: {    

  32.              enabled: true,    

  33.              formatter: function() {    

  34.                  return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);    

  35.              }    

  36.          },    

  37.          plotOptions: {    

  38.              line: {    

  39.                  dataLabels: {    

  40.                      enabled: true    

  41.                  },    

  42.                  enableMouseTracking: true//是否显示title    

  43.              }    

  44.          },    

  45.          series: [{    

  46.              name: '1号机组',    

  47.              data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]    

  48.          },{    

  49.              name: '2号机组',    

  50.              data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]    

  51.          }]    

  52.          });    

  53.          function getForm(){     

  54.              $.ajax({    

  55.                  type: "POST",     //要用post方式         

  56.                  url: "WebServiceFH.asmx/GetLoadEveryHourByOne",           

  57.                  contentType: "application/json",    

  58.                  data: {},    

  59.                  dataType: "json",    

  60.                  success: function (data) {      

  61.                      var data = [data["Load0"],data["Load1"],data["Load2"],data["Loa<a href="/content/317488.html" target="_blank">D3</a>"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data["Load23"]];     

  62.                      chart.series[0].setData(data);     

  63.                  },    

  64.                  error: function (err) {     

  65.                      alert("读取数据出错!");    

  66.                  }    

  67.              });      

  68.              $.ajax({    

  69.                  type: "POST",     //要用post方式         

  70.                  url: "WebServiceFH.asmx/GetLoadEveryHourByTwo",           

  71.                  contentType: "application/json",     

  72.                  dataType: "json",    

  73.                  success: function (data) {      

  74.                      var data = [data["Load0"],data["Load1"],data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data["Load23"]];     

  75.                      chart.series[1].setData(data);       

  76.                  },    

  77.                  error: function (err) {     

  78.                      alert("读取数据出错!");    

  79.                  }    

  80.              });     

  81.          }    

  82.          $(document).ready(function() {      

  83.              //每隔3秒自动调用方法,实现图表的实时更新     

  84.              getForm();    

  85.              window.setInterval(getForm,600000);       

  86.          });    

  87. });  


此处注意:

[javascript] view plaincopy

  1. var data = [data["Load0"],data["Load1"],data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data["Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data["Load23"]];   

  2. chart.series[0].setData(data);  


body中只需要:

[html] view plaincopy

  1. <div id="divChart"> </div>  


希望本文所述对大家的jQuery程序设计有所帮助。


© 著作权归作者所有

冬瓜1
粉丝 11
博文 42
码字总数 16987
作品 0
东城
程序员
私信 提问
用于构建交互式图表的最佳 jQuery 图表库

对于JQuery图表来说,其重要的功能是以一个简洁和交互的方式展示繁杂的原始数据。这并不仅仅以各种颜色来渲染展示数据,而应该是更能够吸引读者和方便用户理解。 稍后介绍的某些javascript图...

oschina
2013/12/07
15.6K
24
11 个用来创建图形和图表的 JavaScript 工具包

Aristochart DEMO || Download Aristochart 是一个用来创建图形和图表的最佳 JavaScript 工具包之一。完全可定制的灵活线图库。 Morris.Js – Pretty Time-Series Line Graphs DEMO || Downl...

oschina
2013/08/06
9.3K
19
20 个数据可视化(数据视觉化)工具

人们常说,数据是新世界的货币,而 Web 则是新世界交易的外汇局。作为消费者,我们正在在数据中漫游;处处都是数据,从食品标签,到世界卫生组织组织的报告。其结果是,信息设计师在从数据流...

oschina
2013/03/23
8.9K
8
15 个构建交互式图表的最佳 jQuery 插件

在这篇文章中,我们向你推荐 15 个图表库,包含从简单图表实现到高度复杂的交互式图表,希望你会喜欢。 1. Chart.js : Charting Library with HTML5 Canvas 使用HTML5 Canvas元素的Javascrip...

oschina
2013/06/22
11.1K
9
10+ 个免费的 jQuery 交互式图形图表库

Interactive CSS3 & jQuery Graph Highcharts jqPlot Flot jQuery Sparklines TufteGraph JS Charts gRaphaël Google Chart Tools GraphUp – jQuery Plugin isoChart Source: http://desi......

oschina
2012/09/01
6.7K
11

没有更多内容

加载失败,请刷新页面

加载更多

聊聊Tomcat中的连接器(Connector)

上期回顾 上一篇文章《Tomcat在SpringBoot中是如何启动的》从main方法启动说起,窥探了SpringBoot是如何启动Tomcat的,在分析Tomcat中我们重点提到了,Tomcat主要包括2个组件,连接器(Conne...

木木匠
27分钟前
1
0
OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
1K
19
SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
28
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部