通过在选项中设置responsive: true和maintainAspectRatio: false，它允许使用CSS调整画布的大小，并且不会扭曲或拉伸图表中的文本.

By setting responsive: true and maintainAspectRatio: false in the options, it allows resizing of the canvas with CSS and does not distort or stretch the text in the chart.

public lineChartOptions: any = {
    responsive: true,
    maintainAspectRatio: false
};

如果您通过javascript更改了CSS，则需要强制图表重新绘制.

If you change your css via javascript, you need to force the chart to repaint.

执行此操作的几种方法:

A couple of ways to do this:

this.lineChartData = this.lineChartData.slice(); 

或

import { Chart } from "chart.js";
...
var ctx = this.chart.ctx;
var chart = this.chart;
var myChart = new Chart(ctx, chart);
myChart.resize();

您可以忽略创建的iframe对象.它不占用任何可见空间.

You can ignore the iframe object that is created. It does not take up any visible space.