调整大小时 Chart.js 模糊答案

【问题标题】：Chart.js blurs when resizing调整大小时 Chart.js 模糊
【发布时间】：2020-01-28 20:12:06
【问题描述】：

我想通过下拉菜单更改图表大小。

图表放置在graphearea div中。

<div class="grapharea" >
        <canvas id="myChartA" class="myChart"></canvas>
</div>

“myChart”类的大小为 100%。因此，如果“graphearea”的大小发生变化，myChat 的大小也会发生变化。

columnSizeSet 函数会改变“graphearea”的大小，并且会重置“.myChart”的大小。

function columnSizeSet() {
     obj = document.setCol.sizeOfCol;
     index = obj.selectedIndex;
     width = obj.options[index].value;
     console.log('width', width);
     $('.grapharea').css('width', width);
     $('.myChart').css('width','100%');
     $('.myChart').css('height', '100%');
     myChartA.update();
}

最后，myChartA 更新了。

但是，它不会像我想要的那样工作。

首先，图表显示正常。选择相对于浏览器宽度的图表大小。

接下来，选择相对于浏览器宽度的图表大小。图表已调整大小　但图表模糊。

如果我改变浏览窗口的大小，它就会变得清晰。

当我改变尺寸时，为什么它不能从一开始就画得很漂亮？ Chartjs 的画布有一个绘图缓冲区，上面的方式只是改变了缓冲区的大小。我猜想在调整窗口大小时缓冲区已被清除并重绘。

如何控制重绘？

我已经将它实现为 Chart.js 选项。

responsive: true,
maintainAspectRatio: true,

对重绘不起作用吗？

我在CODE Pen 有源代码。

【问题讨论】：

标签： javascript html css canvas charts

【解决方案1】：

来自Chart.js docs：

图表也可以通过修改容器大小：

chart.canvas.parentNode.style.height = '128px'; chart.canvas.parentNode.style.width = '128px';

【讨论】：

【解决方案2】：

我发现要解决问题。错误：

 <div class="grapharea">

正确：

<div class="grapharea" style="position: relative;">

【讨论】：