Chart.js canvas resize

前端未结

关注

 13  1098

In (Android WebView HTML5 canvas error) i posted a question regarding plotting graphs using Graph.js library. The problem i have now is that if i call the function to plot t

相关标签:

13条回答

囚心锁ツ

2020-12-01 00:06

This works for me:

<body>
    <form>
        [...]
        <div style="position:absolute; top:60px; left:10px; width:500px; height:500px;">
            <canvas id="cv_values"></canvas>

            <script type="text/javascript">
                var indicatedValueData = {
                    labels: ["1", "2", "3"],
                    datasets: [
                        {
                            [...]
                        };

                var cv_values = document.getElementById("cv_values").getContext("2d");
                var myChart = new Chart(cv_values, { type: "line", data: indicatedValueData });
            </script>
        </div>
    </form>
</body>

The essential fact is that we have to set the size of the canvas in the div-tag.

0 讨论(0)

旧巷少年郎

2020-12-01 00:07
I had the same kind of scaling issue's using Angular CLI. Was able to get it working by removing this line from the index.html:
```
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
```
and then in the angular-cli.json file, in the scripts section, using this:
```
"scripts": ["../node_modules/chart.js/dist/Chart.bundle.min.js"]
```
Source: mikebarr58
0 讨论(0)
发布评论:

提交评论
- 加载中...
暖寄归人

2020-12-01 00:07
Add div and it will solve the problem
```
<div style="position:absolute; top:50px; left:10px; width:500px; height:500px;"></div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
悲&欢浪女

2020-12-01 00:08
In IOS and Android the browser hides the toolbar when you are scrolling, thereby changing the size of the window which inturn lead chartjs to resize the graph. The solution is to maintain the aspect ratio.
```
var options = { 
    responsive: true,
    maintainAspectRatio: true
}
```
This should solve your problem.
0 讨论(0)
发布评论:

提交评论
- 加载中...
我在风中等你

2020-12-01 00:09
What's happening is Chart.js multiplies the size of the canvas when it is called then attempts to scale it back down using CSS, the purpose being to provide higher resolution graphs for high-dpi devices.

The problem is it doesn't realize it has already done this, so when called successive times, it multiplies the already (doubled or whatever) size AGAIN until things start to break. (What's actually happening is it is checking whether it should add more pixels to the canvas by changing the DOM attribute for width and height, if it should, multiplying it by some factor, usually 2, then changing that, and then changing the css style attribute to maintain the same size on the page.)

For example, when you run it once and your canvas width and height are set to 300, it sets them to 600, then changes the style attribute to 300... but if you run it again, it sees that the DOM width and height are 600 (check the other answer to this question to see why) and then sets it to 1200 and the css width and height to 600.

Not the most elegant solution, but I solved this problem while maintaining the enhanced resolution for retina devices by simply setting the width and height of the canvas manually before each successive call to Chart.js
```
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
渐次进展

2020-12-01 00:10
If anyone is having problems, I found a solution that doesn't involve sacrificing responsiveness etc.

Simply wrap your canvas in a div container (no styling) and reset the contents of the div to an empty canvas with ID before calling the Chart constructor.

Example:

HTML:
```
<div id="chartContainer">
    <canvas id="myChart"></canvas>
</div>
```
JS:
```
$("#chartContainer").html('<canvas id="myChart"></canvas>');
//call new Chart() as usual
```
0 讨论(0)
发布评论:

提交评论
- 加载中...