首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

HighCharts+JSON实现实时折线图有关问题

2012-04-11 
HighCharts+JSON实现实时折线图问题我参考 http://download.csdn.net/source/3458265做一个实时折线图,数

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中代码

HTML code
<%@ 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> 



JJ08JSON.ashx代码
VB.NET code
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


[解决办法]
jQuery.getJSON("JJ08JSON.ashx?XMBM=<% =XMBM %>", null,
改成
 jQuery.getJSON("JJ08JSON.ashx?XMBM=<% =XMBM %>&tmp=" + (new Date()).valueOf(), null,

这样可以防止缓存
[解决办法]
放个随机数其实也可以防止缓存

热点排行