我参考 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>