js实现折线统计图引⼊html,jQuery实现折线图的⽅法本⽂实例讲述了jQuery实现折线图的⽅法。分享给⼤家供⼤家参考。具体如下：
效果图如下所⽰：
js引⽤：
定时刷新：
jquery免费特效下载
//曲线图
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() {
' + this.x + '
return '' + this.x + '
' + 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"],da
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"],da
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"],da
chart.series[0].setData(data);
body中只需要：
希望本⽂所述对⼤家的jQuery程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。