我使用Chart.js正确地遵循了文档,并且在我单击检查元素之前,我的条形图看起来太大了,然后该图似乎会调整大小并对齐到正确的位置。
我的canvas元素上没有内联样式,以下样式开始起作用once我去检查元素。我不确定图表从何处或如何获得这些内联样式。
canvas{
width: 100% !important;
max-width: 800px;
height: auto !important;}
var barChart = new Chart(ctx, {
type: 'bar',
responsive: true,
maintainAspectRatio: false,
data: {
...
},
options: {
animation: {
onComplete: function (animation) {
this.options.animation.onComplete = null; // disable after the first render
animation.chartInstance.resize()
}
}
}
});
作为替代,为什么将width
设置为100%,而不是height
?无论如何,在您的屏幕vid中,它位于另一个div
内,因此我也尝试使用height
进行播放。最后,我避免使用全局canvas
CSS选择器-而是使用canvas#barChart
,因为否则它将被应用于所有画布,而不仅是chartjs
画布。