jQuery实现折线图的方法

 这篇文章主要介绍了jQuery实现折线图的方法,涉及jQuery及相关插件的使用技巧,非常具有实用价值,需要的朋友可以参考下

 
 

本文实例讲述了jQuery实现折线图的方法。分享给大家供大家参考。具体如下:

效果图如下所示:

js引用:

复制代码 代码如下:
<script src="Js/Index/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/Index/raphael.2.1.0.min.js" type="text/javascript"></script>
<script src="js/Index/justgage.1.0.1.js" type="text/javascript"></script>
<script src="Js/Index/highcharts.js" type="text/javascript"></script>
<script src="Js/Index/exporting.js" type="text/javascript"></script>

 

定时刷新:

代码如下:
//曲线图
ar chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'divChart', //放置图表的容器
plotBackgroundColor: null,
plotBorderWidth: null,
defaultSeriesType: 'line'
},
title: {
text: '24小时负荷曲线'
},
subtitle: {
text: ''
},
xAxis: {//X轴数据
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'],

labels: {
rotation: -45, //字体倾斜
align: 'right',
style: { font: 'normal 12px 宋体' }
}
},
yAxis: {//Y轴显示文字
title: {
text: 'MW'
}
},
tooltip: {
enabled: true,
formatter: function() {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true//是否显示title
}
},
series: [{
name: '1号机组',
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]
},{
name: '2号机组',
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]
}]
});
function getForm(){
$.ajax({
type: "POST", //要用post方式
url: "WebServiceFH.asmx/GetLoadEveryHourByOne",
contentType: "application/json",
data: {},
dataType: "json",
success: function (data) {
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"]];
chart.series[0].setData(data);
},
error: function (err) {
alert("读取数据出错!");
}
});
$.ajax({
type: "POST", //要用post方式
url: "WebServiceFH.asmx/GetLoadEveryHourByTwo",
contentType: "application/json",
dataType: "json",
success: function (data) {
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"]];
chart.series[1].setData(data);
},
error: function (err) {
alert("读取数据出错!");
}
});
}
$(document).ready(function() {
//每隔3秒自动调用方法,实现图表的实时更新
getForm();
window.setInterval(getForm,600000);
});
});

 

此处注意:

代码如下:
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"]];
chart.series[0].setData(data);

 

body中只需要:

代码如下:
<div id="divChart"> </div>

 

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

时间: 2024-11-02 18:54:31

jQuery实现折线图的方法的相关文章

jQuery实现折线图的方法_jquery

本文实例讲述了jQuery实现折线图的方法.分享给大家供大家参考.具体如下: 效果图如下所示: js引用: 复制代码 代码如下: <script src="Js/Index/jquery-1.5.2.min.js" type="text/javascript"></script>  <script src="js/Index/raphael.2.1.0.min.js" type="text/javascri

在excel柱形图上添加折线图的方法

  如何在excel柱形图上添加折线图是一个提问率非常高的Excel图表问题,虽然不难,但还是有很多同学不会,今天本文以实例图文详解在excel柱形图上添加折线图的方法. [例]如下图所示的实际与计划对比表中,要求制作图表,实际和计划数用柱形图,完成比率用折线图. 制作步骤 1.选取数据表,插入选项卡 - 柱形图. 2.选取完在比率系列,右键菜单中点击"设置数据系列格式". 3.修改为次坐标轴. 4.选取完成比率系列,点击插入 - 折线图. 添加折线图完成,效果如下图所示. 补充:如果

Excel绘制简单折线图的方法

  Excel绘制简单折线图的方法 这是使用同一组数据源制作的图表,两者的视觉效果应该不用我多说了吧.接下来,咱们就看看如何实现的吧. 步骤1 首先选中表格中的任意单元格--插入选项卡--折线图--带数据标记的折线图. 步骤2 选中日期坐标轴,右键--设置坐标轴格式 在弹出的设置坐标轴格式对话框中,设置坐标轴主要刻度线类型为无. 点击数字--自定义,在格式代码中输入"m/d",点击添加--关闭 步骤3

JavaWeb实现图形报表折线图的方法_JSP编程

本文实例讲述了JavaWeb实现图形报表折线图的方法.分享给大家供大家参考,具体如下: 步骤说明: 1. 导入log4j.jar,jfreechart-0.9.18.jar,jdom.jar,jcommon-0.9.3.jar四个jar包 2. 在某个包中写入Tuxin.Java类 package com.mengya.util; import java.awt.Color; import java.awt.Font; import java.io.PrintWriter; import jav

jqplot通过ajax动态画折线图的方法及思路_javascript技巧

效果如图所示,每个五秒钟图会移动一次(其实是重新画了一张图),能显示所监控的cpu信息. pastCpuInfomation函数主要用来显示一张折线图 updateCpuPic函数把5秒前的图去掉,重新根据现有数据画一张图. updateCpuInfomation函数 把最新的点加入存储折线的数组中 再接着在界面中弄两个定时器,让他们每个5秒执行一次updateCpuPic,每个1分钟执行一次updateCpuInfomation,图画就动起来了. PS:代码中执行好多操作前都会在服务器中获取下

D3.js实现折线图的方法详解_javascript技巧

前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>

如何在wps表格中绘制折线图

  在wps表格中绘制折线图的方法: 首先,在准备数据前新建一个excel文档,放在桌面上. 然后双击点开,在sheet1空白部位输入自己想要分析的数据,如工资或财务报表,图中列举了一年十二个月工资. 然后选取要分析的数据,在左上角点击插入按钮,在点击图表按钮的折线图按钮. 接着便会显示折线图的示例,在点击确定. 页面会弹出一个折线图,便是数据变化图.其中还有很多选项任由你分析.

《R数据可视化手册》——2.2 绘制折线图

2.2 绘制折线图 问题如何绘制折线图? 方法使用plot()函数绘制折线图(见图2-3左图)时需向其传递一个包含x值的向量和一个包含y值的向量,并使用参数type="l": plot(pressure$temperature, pressure$pressure, type="l") 如果要向图形中添加数据点或者多条折线(见图2-3右图),则需先用plot()函数绘制第一条折线,再通过points()函数和lines()函数分别添加数据点和更多折线: plot(p

《R数据可视化手册》一2.2 绘制折线图

2.2 绘制折线图 问题如何绘制折线图? 方法使用plot()函数绘制折线图(见图2-3左图)时需向其传递一个包含x值的向量和一个包含y值的向量,并使用参数type="l": plot(pressure$temperature, pressure$pressure, type="l") rgcb_0203.tif 如果要向图形中添加数据点或者多条折线(见图2-3右图),则需先用plot()函数绘制第一条折线,再通过points()函数和lines()函数分别添加数据