Charts.js图表​​未缩放到画布大小 [英] Charts.js graph not scaling to canvas size

问题描述

我正在尝试用Charts.js创建一个图形（当前的一个只是一个非常简单的例子，我正在努力工作，有点取自Chart.js文档）并且图形没有缩放到画布的大小我给它。这是所有相关的代码。

I'm trying to make a graph with Charts.js (current one is just a really simple example I'm trying to get working, somewhat taken from the Chart.js documentation) and the graph isn't scaling to the size of the canvas I'm giving it. Here is all the relevant code.

要导入它：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>

然后，我将其连接到javascript文件，如下所示：

Then, I connect it to a javascript file as follows:

<script type="text/javascript" src="js/stats_tab.js"></script>

我设置了画布：

        <div id="graph_2015" class ="stats_box">
            <h4>Graph 2015</h4>
            Text
            <canvas id="myChart" width="200" height="200"></canvas>
        </div>

最后在stats_tab.js中，我有以下代码：

And then finally in stats_tab.js, I have the following code:

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
        }
    });
}

图表显示很好，但它拒绝缩放到画布的大小我给了它。也没有任何与所涉及的div相关的CSS。 chrome上的inspect功能让我知道最终图表是676乘676而不是我指定的200乘200。不太确定发生了什么。

The graph displays nicely, but it refuses to scale to the size of the canvas I gave it. There is also no css relevant to any of the divs involved. The inspect feature on chrome lets me know that the final graph is 676 by 676 instead of the 200 by 200 I specified. Not really sure what's going on.

谢谢！

推荐答案

如果Chartjs的响应模式为false（默认情况下为true），则为画布设置的width和height属性才有效。将您的stats_tab.js更改为此，它将起作用。

The width and height property that you set for the canvas only work if the Chartjs' responsive mode is false (which is true by default). Change your stats_tab.js to this and it will work.

    window.onload=function(){
        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [1,2,3,4,5,6,7,8,9,10],
                datasets: [
                    {
                        label: "My First dataset",
                        data: [1,2,3,2,1,2,3,4,5,4]
                    }
                ]
            },
            options: {
                responsive: false
            }
        });
    }

这篇关于Charts.js图表​​未缩放到画布大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！