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

问题描述

我正在尝试使用 Charts.js 制作图表(当前只是一个非常简单的示例，我正在尝试开始工作，有些取自 Chart.js 文档)并且该图表没有缩放到我给它的画布的大小.这是所有相关代码.

导入:

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

然后，我将它连接到一个 javascript 文件，如下所示:

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

我已经设置好了画布:

 
<h4>图表 2015</h4>文本<canvas id="myChart" width="200" height="200"></canvas>

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

window.onload=function(){var ctx = document.getElementById("myChart").getContext("2d");var myChart = 新图表(ctx，{类型:'线'，数据: {标签:[1,2,3,4,5,6,7,8,9,10],数据集:[{标签:我的第一个数据集"，数据:[1,2,3,2,1,2,3,4,5,4]}]},选项: {}});}

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

谢谢！

解决方案

您为画布设置的宽度和高度属性仅在 Chartjs 的响应模式为 false(默认为 true)时才有效.将您的 stats_tab.js 更改为此，它会起作用.

 window.onload=function(){var ctx = document.getElementById("myChart").getContext("2d");var myChart = 新图表(ctx，{类型:'线'，数据: {标签:[1,2,3,4,5,6,7,8,9,10],数据集:[{标签:我的第一个数据集"，数据:[1,2,3,2,1,2,3,4,5,4]}]},选项: {响应:错误}});}

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.

To import it:

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

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

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

I have my canvas set up:

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

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: {
        }
    });
}

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.

Thanks!

解决方案

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屋！