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

效果图如下所示：

射流研究…引用：复制代码代码如下：脚本src=' http : js/Index/jquery-1。5 .2 .量滴js ' type=' text/JavaScript '/script script src=' http : js/Index/Raphael。2 .1 .0 .量滴js ' type=' text/JavaScript '/script script src=' http : js/Index/just gage。1 .0 .1 .js ' type=' text/JavaScript '/

定时刷新：复制代码代码如下：//曲线图阿肯色州图表；$(文档)。ready(function(){ chart=新高图表.图表({ chart : { render to : ' div chart '，//放置图表的容器plotBackgroundColor: null，plotBorderWidth: null，defaultSeriesType: 'line' }，title: { text: '24小时负荷曲线},副标题： { text: '' }，xaxis 3360 {//X轴数据类别： ['00 ',' 01 ',' 02 ',' 03 ',' 04 ',' 05 ',' 06 ',' 07 ',' 08 ',' 09 ',' 10 ',' 11 ',' 12 ',' 13 ',' 14 ',' 15 ',' 16 ',' 17 ',' 18 ',' 19 ',' 20 ',' 21 ',' 22 ',' 23'],标签: {旋转3360-45，//字体倾斜对齐： '右，样式： { font: '正常12px宋体} } }，yAxis: {//Y轴显示文字title: { text: 'MW' }，tooltip: { enabled: true，formatter : function(){ return ' ' this。x ' br/'这个。系列。说出：高点。数字格式(这个。y，1)；} }，plotoptions 3360 {第：行{ data labels : { enabled : true }，enablemousetrack : 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] }，{ 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]}]})；函数getForm(){ $ .ajax({ type: 'POST '，//要用邮政方式URL : ' webservicefh。asmx/GetLoadEveryHourByOne '，内容类型： ' application/JSON '，数据： {}，数据类型： 'json '，成功：函数（数据){ var data=[data['Load0']，data['Load1']，data['Load2']，data['Load3']，data['Load4']，data['Load5']，data['Load6']，datachart.series[0].setData(数据);}，错误：函数(错误){ alert('读取数据出错!');} });$.ajax({ type: 'POST '，//要用邮政方式URL : ' webservicefh。asmx/GetLoadEveryHourByTwo '，内容类型： '应用程序/JSON '，数据类型： 'json '，成功：函数（数据){ var data=[data['Load0']，data['Load1']，data['Load2']，data['Load3']，data['Load4']，data['Load5']，data['Load6']，data['Load7']，data图表系列[1]。setData(数据);}，错误：函数(错误){ alert('读取数据出错!');} });} $(文档)。就绪（函数(){ //每隔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']，datasetData(数据);

身体中只需要：复制代码代码如下：div id='divChart' /div

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