折线图高度问题

时间:2019-08-03 05:41:22

标签: ionic-framework chart.js ionic4 linechart

我在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;
                        }
                    }
                }
            }

        });

0 个答案:

没有答案