Chart.js размывается при изменении размера

Question

Я хочу изменить размер диаграммы через выпадающее меню.

Диаграмма помещена в раздел graphearea.

<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 .

Answer 1

Из документов Chart.js :

Диаграмма также может быть программно изменена путем изменения размера контейнера:

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

Answer 2

Я выяснил, чтобы решить проблемы.Неправильно:

 <div class="grapharea">

Правильно:

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