jQuery Highcharts折线图案例分析
jopen
9年前
Highcharts是一款功能非常强大的jQuery图表应用，利用Highcharts可以创建很多外观漂亮而且数据展示灵活的网页图表。本文主要介绍了利用Highcharts实现的折线图，并将部分代码分享给大家。
效果图如下所示：
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程序设计有所帮助。
来源：开心就是最好