javascript - 调整大小时 Chart.js 模糊

Question

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

图表放置在 graphearea div 中。

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

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

“graphearea”的大小将被更改 columnSizeSet 函数，“.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中有源代码。

标签： javascripthtmlcsscanvascharts

Answer 1

来自Chart.js 文档：

图表也可以通过修改容器大小以编程方式调整大小：

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