jQuery Highcharts折线图案例分析

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

效果图如下所示:
jQuery 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程序设计有所帮助。


你可能感兴趣的:(PHP)