我正在尝试创建类似于 www.chartjs.org 顶部的内容其中有一个随机移动的背景条形图。我发现了另一个类似的question ,但是它似乎不起作用。当我在下面添加时,它不会添加除 400x400 Canvas 以外的任何内容。我错过了什么?
导入chartjs
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
Canvas 放置在
<canvas id="hero-bar" width="400" height="400"></canvas>
脚本放置在底部
<script>
var data = [],
barsCount = 50,
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('hero-bar').getContext('2d')).Bar({
labels : labels,
datasets : [{
fillColor : '#2B303B',
data : data
}]
},{
showScale : false,
barShowStroke : false,
barValueSpacing: 1,
showTooltips : false,
onAnimationComplete : function(){
// Get scope of the hero chart during updates
var heroChart = this,
timeout;
// Stop this running every time the update is fired
this.options.onAnimationComplete = randomUpdate;
this.options.animationEasing = 'easeOutQuint';
randomUpdate();
function randomUpdate(){
heroChart.stop();
clearTimeout(timeout);
// Get a random bar
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);
};
}
});
</script>
最佳答案
这不起作用,因为该示例使用的语法适用于 Chart.js 的旧版本(1.x
),但您似乎使用最新版本的库。
以下是更新后的语法,与最新版本的 Chart.js (2.7.1
) 完美配合:
var data = [],
barsCount = 50,
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('hero-bar'), {
type: 'bar',
data: {
labels: labels,
datasets: [{
backgroundColor: '#2B303B',
data: data
}]
},
options: {
legend: false,
scales: {
yAxes: [{
display: false
}]
},
tooltips: false,
animation: {
onComplete: function() {
// Get scope of the hero chart during updates
var heroChart = this,
timeout;
// Stop this running every time the update is fired
this.options.animation.onComplete = randomUpdate;
this.options.animation.eeasing = 'easeOutQuint';
randomUpdate();
function randomUpdate() {
heroChart.stop();
clearTimeout(timeout);
// Get a random bar
timeout = setTimeout(function() {
var randomNumberOfBars = Math.floor(Math.random() * barsCount),
i;
for (i = randomNumberOfBars - 1; i >= 0; i--) {
heroChart.data.datasets[0].data[Math.floor(Math.random() * barsCount)] = Math.round(Math.random() * 100);
};
heroChart.update();
}, Math.random() * updateDelayMax * 2);
};
}
}
}
});
查看working example .
关于javascript - Chartjs 创建类似的背景,就像在 Chartjs.org 中一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47114045/