当前位置: 代码迷 >> ASP.NET >> HighCharts+JSON实现实时折线图有关问题
  详细解决方案

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

热度:9738   发布时间:2013-02-25 00:00:00.0
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>
  相关解决方案