我在ionic4应用程序中使用chart js lib集成了折线图,它可以正常工作,但在某些情况下,它会自动增加其高度(它会逐渐降低),除非我关闭屏幕或应用程序不会停止。谁能帮助我解决这个问题?请检查我的以下代码。
html代码:
<canvas #lineCanvas></canvas>
css code:
canvas {
padding-left: 15px !important;
padding-right: 15px !important;
padding-top: 8px !important;
}
ts代码:
const ctx = this.lineCanvas.nativeElement.getContext('2d');
let gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, '#0f4573');
gradient.addColorStop(0.5, '#51b7c5');
this.lineChart = new Chart(this.lineCanvas.nativeElement, {
type: 'line',
data: {
labels: labels,
datasets: [
{
fill: true,
lineTension: 0.1,
backgroundColor: gradient,
borderColor: '#0f4573',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: data,
spanGaps: false,
borderWidth: 0.9
}
]
},
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function (tooltipItem) {
console.log(tooltipItem);
return tooltipItem.yLabel;
}
}
}
}
});