我正在使用Humble Finance绘制一系列数据,以实现时间间隔效果。以下是我的代码,但我想先解释一下:
如果您不熟悉HF,它的初始化函数需要三个JavaScript数组(priceData、volumeData和summaryData),然后将它们绘制到三个图表上。这些数组每个都包含多个XY对的数组。
在我的程序中,我声明了三个空的“graph”数组(priceData、volumeData和summaryData),然后从数据库中获取值并将它们放入名为priceDataOrig、volumeDataOrig和summaryDataOrig的“master”JavaScript数组的数组中。我不是将这些数组传递给HF并一次性绘制所有数据,而是调用一个UpdateGraph()函数,该函数每40毫秒调用一次自身。UpdateGraph()将一个值(实际上是包含一个XY对的数组)从主数组推送到相应的图形数组中,然后调用HF初始化函数(传递图形数组),绘制三个图形。当图形数组中有50个点时,我开始移除最旧的点,然后推入新的点,以便一次只绘制不超过50个点的图形。
此外,我正在使用jQuery的load()函数来加载图表,所以每当用户点击“Go”按钮时,页面上的一个div中就会加载处理上述所有内容的graph.php,并开始逐点绘制图表。想法是用户应该能够在需要重新加载图表并再次观看时间流逝时随时单击Go。
现在来说我的问题:在我的测试程序中,我总共绘制了约500个值,因此这绝不是一个大数据集。第一次单击Go时,所有值都被正确绘制出来。然而,浏览器的内存使用量飙升(我已经尝试过在Firefox和Chrome中),当用户再次单击Go时,浏览器在绘制过程中部分崩溃。我完全不知道为什么会发生这种情况——我已经尝试在绘制完成后将所有数组置空等等。
有人有什么想法吗?这是我的graph.php代码,稍作修改以便更清晰地理解:
如果您不熟悉HF,它的初始化函数需要三个JavaScript数组(priceData、volumeData和summaryData),然后将它们绘制到三个图表上。这些数组每个都包含多个XY对的数组。
在我的程序中,我声明了三个空的“graph”数组(priceData、volumeData和summaryData),然后从数据库中获取值并将它们放入名为priceDataOrig、volumeDataOrig和summaryDataOrig的“master”JavaScript数组的数组中。我不是将这些数组传递给HF并一次性绘制所有数据,而是调用一个UpdateGraph()函数,该函数每40毫秒调用一次自身。UpdateGraph()将一个值(实际上是包含一个XY对的数组)从主数组推送到相应的图形数组中,然后调用HF初始化函数(传递图形数组),绘制三个图形。当图形数组中有50个点时,我开始移除最旧的点,然后推入新的点,以便一次只绘制不超过50个点的图形。
此外,我正在使用jQuery的load()函数来加载图表,所以每当用户点击“Go”按钮时,页面上的一个div中就会加载处理上述所有内容的graph.php,并开始逐点绘制图表。想法是用户应该能够在需要重新加载图表并再次观看时间流逝时随时单击Go。
现在来说我的问题:在我的测试程序中,我总共绘制了约500个值,因此这绝不是一个大数据集。第一次单击Go时,所有值都被正确绘制出来。然而,浏览器的内存使用量飙升(我已经尝试过在Firefox和Chrome中),当用户再次单击Go时,浏览器在绘制过程中部分崩溃。我完全不知道为什么会发生这种情况——我已经尝试在绘制完成后将所有数组置空等等。
有人有什么想法吗?这是我的graph.php代码,稍作修改以便更清晰地理解:
<?php
#Queries the DB and constructs the data strings assigned to JavaScript arrays below,
#An example might be: $priceData = '[[0,100.34],[1,108.31],[2,109.40],[3,104.87]]';
?>
<script>
//Global variables used in UpdateGraph():
//The "master" arrays -- I'm just using the same data for all of
//them for now (an array containing around 500 arrays of XY pairs)
var priceDataOrig = <?php echo $priceData; ?>;
var volumeDataOrig = <?php echo $priceData; ?>;
var summaryDataOrig = <?php echo $priceData; ?>;
var priceData = [],
volumeData = [],
jsonData = [];
i = 0,
pointsToShowAtOnce = 50,
totalPoints = priceDataOrig.length,
updateRate = 40; //milliseconds
UpdateGraph();
//Periodically updates the graph to show time lapse, adding one new point at a time
function UpdateGraph() {
//Only add a new point if all the points haven't already been added
if (i != totalPoints) {
//Add a new point to each array
priceData.push(priceDataOrig[i]);
volumeData.push(volumeDataOrig[i]);
summaryData.push(jsonDataOrig[i]);
if (i >= pointsToShowAtOnce) {
//We're showing the amount of points we want to show, so remove the oldest point
priceData.shift();
volumeData.shift();
jsonData.shift();
//Sets the new X values for these points -- not really pertinent to
//my question, it works the same if this block is commented out.
var pLen = priceData.length;
var j, c = 0;
for (j = 0; j < pLen; j++) {
priceData[j][0] = c;
volumeData[j][0] = c;
c++;
}
}
//Load the graph itself. 'humblefinance' is just a div on the page.
HumbleFinance.init('humblefinance', priceData, volumeData, summaryData);
i++;
//This function calls itself at the interval in
//updateRate until all the points have been drawn
setTimeout('UpdateGraph()', updateRate);
} else {
//I null these out here even though it doesn't seem necessary.
//It doesn't help though.
priceDataOrig = null;
volumeDataOrig = null;
summaryData = null;
jsonDataOrig = null;
priceData = null;
volumeData = null;
jsonData = null;
}
}
</script>
<div id="humblefinance"></div>