我在addData和removeData函数中添加了chart.resize(),但是它总是增加高度,而且从来没有减少!
当用户点击菜单项时,我正在更新图表。有些项有100多个数据,有些项只有2个数据,当数据很少时,图表总是在增加高度:
horizontalBar
为什么会发生这种情况?
<canvas id="chart"></canvas>
var chartData = {
labels: [<?php echo '"'.implode('","', $chart_labels ).'"' ?>],
datasets: [
{
data: [<?php echo implode(',', $chart_numbers ) ?>],
backgroundColor: '#184b8f',
hoverBackgroundColor: '#ef3e42'
}
]
};
var barOptions = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
},
legend: {
display: false
},
scales : {
xAxes : [{
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
color: '#cfcfcf'
}
} ],
yAxes : [ {
gridLines : {
display: false
},
ticks: {
fontSize: 13,
fontFamily: "'Open Sans'",
fontWeight: 600,
}
}]
},
animation: {
duration: 500,
easing: "easeOutQuart",
}
};
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.resize();
chart.update();
}
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.resize();
chart.update();
}
var ctx = document.getElementById("chart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'horizontalBar',
data: chartData,
options: barOptions
});
4条答案
按热度按时间sq1bmfud1#
我也有过同样的经历。你必须在画布周围放一个空的div。
mitkmikd2#
我发现一些用户在此帖子中遇到了同样的问题:https://github.com/jtblin/angular-chart.js/issues/84
我的解决方案是将图表的选项更改为maintainAspectRatio:错误。
cnwbcb6i3#
在laravel livewire中,修复了将
wire:ignore
添加到 Package 器divbvk5enib4#
我在布尔玛瓷砖上也遇到了同样的问题。
修复方法是在Chart.js脚本选项区域中设置
responsive: false
。