Issue
I want to change chart size via pulldown menu.
The chart is placed in the graphearea div.
<div class="grapharea" >
<canvas id="myChartA" class="myChart"></canvas>
</div>
The size of "myChart" class is 100%. Therefore, if the size of "graphearea" changes, the size of myChat also changes.
The size of "graphearea" will be changed columnSizeSet function, and size of ".myChart" will be reset.
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();
}
Finally, myChartA is updated.
But, it will not work what I want.
First, chart is shown normally. select the chart size relative to the browser width.
Next, select the chart size relative to the browser width. Chart was resized however the chart is blurred.
If I changed the size of browse window, it become clearly.
Why don't it draw beautifully from the beginning when I change the size? Chartjs's canvas has a drawing buffer and only the buffer size is changed in the above way. I guess that the buffer was cleared and redrawn when the window was resized.
How to control the redraw ?
I had implemented it as Chart.js Option.
responsive: true,
maintainAspectRatio: true,
Is it not work on the redraw?
I had source code in CODE Pen.
Solution
From the Chart.js docs:
The chart can also be programmatically resized by modifying the container size:
chart.canvas.parentNode.style.height = '128px'; chart.canvas.parentNode.style.width = '128px';
Answered By - raychz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.