我遇到的问题是,当我点击通过JQuery事件点击查看图表时,图表工作快速而顺利,但如果我双击或点击10次,每次点击图表运行越来越慢。也就是说,点击取决于图表性能。我相信$.getscript()
导致了这种低性能或糟糕的JQuery代码..
下面的JQuery事件负责显示图表。请记住,用户具有在图表之间导航的机会,他们只能查看一次图表。
$('[data-row]').on('click', function() {
var row = $(this).attr('data-row');
$('.active').removeClass('active'); // Displaye:none
$('#table' + row).addClass('active'); // Display:block
if(row == 1){
$.getScript("diagram1.js"); // Display diagram1
} else {
}
});
这是 diagram1.js。
(function (){
$(document).ready(function(){
var dps = []; // data
var chart = new CanvasJS.Chart("diagram1 ",
{
title:{
text: "Exhaust Temperature"
data: [
{
type: "spline",
name: "Temp Cylinder 1",
showInLegend: "true",
legendText: "Temp Cylinder 1",
dataPoints: dps1
}
});
var xVal = 0;
var updateInterval = 50;
var dataLength = 50;
var updateChart = function (count) {
count = count || 1;
for (var j = 0; j < count; j++) {
dps.push({
x: xVal,
y: EXTS[1]
});
xVal++;
};
if (dps.length > dataLength )
{
dps.shift();
}
chart.render();
};
// generates first set of dataPoints
updateChart(dataLength);
// update chart after specified time.
setInterval(function(){updateChart()}, updateInterval);
});
}());