作者:Vicky小希希 | 来源:互联网 | 2023-01-27 13:23
我在addData和removeData函数内部添加了chart.resize(),但是它总是在增加高度,并且永远不会减少!
当用户单击菜单项时,我正在更新图表。有些项目具有100多个数据,而另一些项目只有2个数据,而当数据很少时,图表总是在增加高度:
HorizontalBar
为什么会这样呢?
var chartData = {
labels: [],
datasets: [
{
data: [],
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
});
idontknow..
10
我有同样的事情。您必须在画布周围放置一个空的div。
1> idontknow..:
我有同样的事情。您必须在画布周围放置一个空的div。