HighCharts+JSON实现实时折线图有关问题
日期：2014-05-18 浏览次数：20512 次
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中代码
我参考 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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
