HighCharts+JSON实现实时折线图问题
我参考 http://download.csdn.net/source/3458265 做一个实时折线图,数据从数据库中提取!参考chenjie_email_world 的代码调试,做了一个JJ08JSON.ashx从数据库中取数,但好像JJ08JSON.ashx加上断点后发现好像只运行几次就停了,数据库发生变化,图表也不会变!
function getForm(){
//使用JQuery从后台获取JSON格式的数据
jQuery.getJSON("JJ08JSON.ashx?XMBM=<% =XMBM %>", null, function(data) {
chart.series[0].setData(data); //data为JJ08JSON.ashx从数据库中提取的数据,一直不变!
if(i==5) { i=0; }
chart.series[1].setData(dataArray[i++]); //取定义的数组,正常
});
}
//每隔3秒自动调用方法,实现图表的实时更新
window.setInterval(getForm,2000);
以下为详细的代码:
HTML中代码
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="JJ08_Chart.aspx.vb" Inherits="JJ_JJ08_Chart" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <!--<Meta http-equiv="Refresh" Content="5;">--> <title></title><!-- 1. Add these JavaScript inclusions in the head of your page --><SCRIPT src="/HChart/jquery.min.js" type=text/javascript></SCRIPT><SCRIPT src="/HChart/highcharts.js" type=text/javascript></SCRIPT><!-- 1a) Optional: the exporting module --><SCRIPT src="/HChart/exporting.js" type=text/javascript></SCRIPT><!-- 2. Add the JavaScript to initialize the chart on document ready --><SCRIPT type=text/javascript> var chart; $(document).ready(function () { chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'line', marginRight: 130, marginBottom: 25 }, title: { text: '报价曲线图', x: -20 //center }, subtitle: { text: '', x: -20 }, xAxis: { //categories: ['0', '1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11', '12', '13', '14', '15'] categories: [<% =sX %>] }, yAxis: { title: { text: '报价(元)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '元'; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [<% =sY %>// {// name: '2031',// data: [[0.8, 32000], [2, 34000], [5, 35000], [9, 34000], [10.5, 32000]]// }, ] }); //声明数组 模拟后台获得数据 --- //每次调用获得一条新数据放在末尾,第一条数据丢弃 var dataArray = new Array(); dataArray[0] = [71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 56.3]; dataArray[1] = [106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 56.3, 58.6]; dataArray[2] = [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 56.3, 58.6, 47.6]; var i =0; function getForm(){ //使用JQuery从后台获取JSON格式的数据 jQuery.getJSON("JJ08JSON.ashx?XMBM=<% =XMBM %>", null, function(data) { chart.series[0].setData(data); chart.series[1].setData(dataArray[i++]); }); } //每隔3秒自动调用方法,实现图表的实时更新 window.setInterval(getForm,2000); });</SCRIPT></head><body> <form id="form1" runat="server"> <div id="container" style="MARGIN: 0px auto; WIDTH: 700px; HEIGHT: 450px"> </div> </form></body></html>
Public Class JJ08JSON : Implements IHttpHandler Public sX As String Public sY As String Dim info As Hemp.Base.LoginUser Dim sXMBM As String Dim strSQL As String Dim dr As Data.IDataReader Dim NewY As String Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest context.Response.ContentType = "text/plain" sXMBM = context.Request("XMBM") strSQL = "SELECT * FROM EPS_VenPrice where XMBM='" & sXMBM & "' and VenCode='test1' order by vencode,bjcs" ' dr = Hemp.SqlHelper.ExecuteReader(Hemp.Base.UserInfo.StrConn, Data.CommandType.Text, strSQL) sY = "" While dr.Read sY &= "[" & dr!BJCS.ToString & ", " & dr!BJ.ToString & "]," End While dr.Close() 'sY &= "]}" sY = sY.Replace("],]", "]]") 'sY = sY.Replace("{name: '',data: [","").Replace(" sY = Hemp.StringUtil.DelLastComma(sY) sY = "[" & sY & "]" context.Response.Write(sY) context.Response.Flush() context.Response.End() End Sub Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End PropertyEnd Class