我有这个完整的随机图形条脚本,包含Chart.js和canvas元素。
当我通过检查元素来调整窗口大小或在平板电脑/手机大小中测试脚本时,它不会调整大小(因为预期的css),并且干扰了我的检查过程。我试图让脚本重新启动窗口调整大小,但我无法让它工作,尝试一些不同的方法。
脚本:
(function($) {
$(document).ready(function(barChart) {
(function() {
var data = [],
barsCount = 24,
labels = new Array(barsCount),
updateDelayMax = 500,
$id = function(id) {
return document.getElementById(id);
},
random = function(max) {
return Math.round(Math.random() * 100)
},
helpers = Chart.helpers;
Chart.defaults.global.responsive = true;
for (var i = barsCount - 1; i >= 0; i--) {
data.push(Math.round(Math.random() * 100));
};
new Chart($id('header-random-bar-graph').getContext('2d')).Bar({
labels: labels,
datasets: [{
fillColor: 'rgba(220,220,220,0.1)',
data: data
}]
}, {
showScale: false,
barShowStroke: false,
barValueSpacing: 1,
showTooltips: false,
onAnimationComplete: function() {
var heroChart = this,
timeout;
this.options.onAnimationComplete = randomUpdate;
this.options.animationEasing = 'easeOutQuint';
randomUpdate();
function randomUpdate() {
heroChart.stop();
clearTimeout(timeout);
timeout = setTimeout(function() {
var randomNumberOfBars = Math.floor(Math.random() * barsCount),
i;
for (i = randomNumberOfBars - 1; i >= 0; i--) {
heroChart.datasets[0].bars[Math.floor(Math.random() * barsCount)].value = Math.round(Math.random() * 100);
};
heroChart.update();
}, Math.random() * updateDelayMax);
};
}
});
})();
});
})(jQuery);
我尝试添加到最后:
$(window).resize(barChart);
然后我在Chrome中遇到控制台错误:“barChart未定义”。
jsFiddle:https://jsfiddle.net/q44qbdov/4/,但小提琴不能正确显示问题。
答案 0 :(得分:2)
barChart
进一步定义了一些函数,你必须将它比你的小提琴更进一步。
(function($) {
$(document).ready(function(barChart) {
//barChart is only defined within this closure
(function() {
//your code...
})();
$(window).resize(barChart);
});
})(jQuery);
修改强>
如果我理解正确,当您调整窗口大小时,您会尝试再次调用$(document).ready
上调用的方法。对上述代码的一点修改就是:
(function($) {
$(document).ready(function() {
//define a function to use it again as a handler
function barChart() {
//your code...
});
//execute the function
barChart();
//set function as resize event handler
$(window).resize(barChart);
});
})(jQuery);
顺便说一下:我认为你不需要
(function($) {...})(jQuery);
以及
$(document).ready(function() {...});
但我可能错了,这不是你问题的一部分,所以,无论如何:)