Chart.js 画布和图表宽度在重绘时被覆盖

Question

我用 chart.js 制作的图表每次重绘时都会增长，我不知道为什么。 我的图表卡瓦斯代码是：

let tempChart = document.getElementById("tempChart").getContext('2d');
let pressureChart = document.getElementById("pressureChart").getContext('2d');
let O3Chart = document.getElementById("O3Chart").getContext('2d');
let PM1Chart = document.getElementById("PM1Chart").getContext('2d');

<canvas id="tempChart"></canvas>
<canvas id="pressureChart"></canvas>
<canvas id="O3Chart"></canvas>
<canvas id="PM1Chart"></canvas>

这是我每次想要绘制或重绘图表时调用的代码：

function createChart(chartLabels, chartData, chart, label, backgroundcolor, beginAtZero, borderColor) {

    let LineChart = new Chart(chart, {
        type: 'line',
        data: {
            labels: chartLabels,
            datasets: [{
                label: label,
                data: chartData,
                backgroundColor: backgroundcolor,
                pointRadius: 0,
                borderColor: borderColor
        }]
        },
        options: {
            responsive: false,
            scales: {
                yAxes: [{
                        ticks: {
                            beginAtZero: beginAtZero
                        }
                }
                ]
            }
        }
    })

}

我运行一次 createChart 之前画布的 CSS：

    width: 45%;
    padding: 20px 20px;
    border-bottom: 1px solid #dedede;

我运行 createChart 后的 CSS：

    display: block;
    height: 341px;
    width: 683px;

我已经为我的标签和数据使用空数组和完整数组测试了这段代码，在这两种情况下，每次调用 createChart 函数时图表都会增长。

Answer 1

您使用的库 (chart.js) 似乎默认覆盖了这些 css 值。

一种选择是在 createChart 函数结束时将这些值设置回正确的值。

例如：

tempChart.style.width = 45%;

其他选项是在样式表中为它们添加强大的功能，!important，但这取决于 (chart.js) 的作用方式。