Envision.js ライブラリを使用した少しふりをした販売グラフがあります。Firebug が実行されている限り、うまく機能します。20 ~ 25 の数値がグラフ化され、Web サーバーをオフにすると 0 で平坦になります。しかし、firebug をオフにすると、更新されます。それがすることは、ゼロでフラットラインすることだけです。私のajax関数であるmyFunction()の配置と関係があるはずですが、何がわかりません。誰かがこれについて私に目玉をくれませんか?私は何も見ていません。別のページでまったく同じ2つの関数を使用しているため、Ajax関数自体ではないことはわかっていますが、それらは完全に機能します。サーバーから (4 & 200) が戻ってくるのでわかりません...よろしくお願いします。
//Global Variables//////////
var counter = 0;
var myArray = [25, 24, 23, 22, 21, 20];
var resultToGraph;
var url = "http://myserver.com/ajax_info.txt";
var xmlhttp;
function loadXMLDoc(url, cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url, true);
xmlhttp.send();
}
function myFunction(){
loadXMLDoc(url+'?_dc='+(new Date()).getTime(), function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
resultToGraph = myArray[Math.floor((Math.random()*5))];
}
else{
resultToGraph = 0;
}
});
}
(function realtime_demo (container) {
var
x = [],
dataA = [],
data = [[x, dataA]],
options, i, timesries;
// Mock Data:
function sample(i) {
x.push(i);
dataA.push(i);
}
// Initial Data:
for (i = 0; i < 100; i++) {
sample(i);
}
// Envision Timeseries Options
options = {
container : container,
data : {
detail : data,
summary : data
},
defaults : {
summary : {
config : {
colors : [ 'red'], //added to code...nothing there initiall**
handles : { show : true } //changed from false **
}
}
}
}
// Render the timeseries
timeseries = new envision.templates.TimeSeries(options);
// Method to get new data
// This could be part of an Ajax callback, a websocket callback,
// or streaming / long-polling data source.
function getNewData () {
i++;
// Short circuit (no need to keep going! you get the idea)
if (i > 5000) return;
sample(i);
animate(i);
}
// Initial request for new data
getNewData();
// Animate the new data
function animate (i) {
var
start = (new Date()).getTime(),
length = 500, // 500ms animation length
max = i - 1, // One new point comes in at a time
min = i - 31, // Show 50 in the top
offset = 0; // Animation frame offset
// Render animation frame
(function frame () {
var
time = (new Date()).getTime(),
tick = Math.min(time - start, length),
offset = 0;
//offset = (Math.sin(Math.PI * (tick) / length - Math.PI / 2) + 1) / 2;
// Draw the summary first
timeseries.summary.draw(null, {
xaxis : {
min : 0,
max : max + offset
}
});
// Trigger the select interaction.
// Update the select region and draw the detail graph.
timeseries.summary.trigger('select', {
data : {
x : {
min : min + offset,
max : max + offset
}
}
});
if (tick < length) {
setTimeout(frame, 0);
} else {
// Pretend new data comes in every second
setTimeout(getNewData, 0);
}
})();
}
}
)(document.getElementById("container"));