Question

我正在尝试用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>

我设置了画布：

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

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

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。不确定发生了什么。

谢谢！

Answer 1

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

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

Answer 2

重点是：width和height属性不是px中的大小，而是比率。

<canvas id="myChart" width="400" height="400"></canvas>

在这个例子中，它是1：1的比例。所以，如果你的html contenair是676 px宽度，那么你的图表将是676 * 675px
这可以解释一些常见的错误。

您可以将maintainAspectRatio设置为false来禁用此功能。

Answer 3

在您的选项中，将maintainAspectRatio设置为false，将responsive设置为true。最初，这将尝试缩放图表以匹配画布的尺寸。如果画布不适合屏幕，即在手机上，您的图表将重新缩放以适合页面。

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: true,
            maintainAspectRatio: false,
        }
    });
}

Answer 4

This应该有效。基本上，只需将宽度和高度属性添加到您的javascript：

var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 200;
ctx.canvas.height = 200;
var myChart = new Chart(ctx,.........

参考：Chart.js canvas resize

Answer 5

如果您的<canvas>元素没有width和height“ 属性”（ 不是css属性< / em> ）。尝试将它们中的每一个都设置为1（因为它只是一个比率）

<canvas id="activeUsersPieChart" width="1" height="1"></canvas>

Answer 6

聚会晚了一点，但是我在这个问题上苦苦挣扎，尤其是在有多个图表的页面上。

这个小窍门解决了所有问题-我的图表现在都非常适合，并根据它们所在的div精确调整大小。

将此添加到您的页面样式中（8像素是个人喜好。如有需要，请更改）：

<style type="text/css">
    #canvas-holder {
        background-color: #FFFFFF;
        position: absolute;
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
</style>

对于适当的Divs：

<div id="canvas-holder">
    <canvas id="chart-area"></canvas>
</div>

Answer 7

以下对我有用，我能够保持图表的响应能力！

  var ctxx = document.getElementById("myChart");
  ctxx.height = 80;

Answer 8

真正的问题是画布将根据其父级重新缩放。我想保持响应能力。所以像这样的东西可以解决这个问题：

<div style="width:50%">
    <canvas id="myChart"></canvas>
</div>

Answer 9

我遇到了同样的问题，我的图形无法正确调整大小。为了解决这个问题，我做了两件事。

将画布标签样式设置为宽度和高度为100％。这样可以确保它始终适合其容器宽度和高度的100％。
对于设置的选项值，响应：true和maintainAspectRatio：false。这样可以确保图形在不考虑长宽比的情况下响应大小的更新。

下面是我使用的代码：

css
#myGraph {
width: 100%;
height: 100%;
}

html
<canvas id="myGraph" />

使用ctx初始化图表时，请设置以下选项：

   

 options: {
            responsive: true,
            maintainAspectRatio: false
            }

现在，当您调整屏幕大小时，图形应相应地调整大小。注意：该图现在将填充其容器的大小，因此您将画布放入其中的任何内容都将填充该容器的大小。

Answer 10

以下来自Chart.js文档的代码为我工作。 “ https://www.chartjs.org/docs/latest/general/responsive.html”

var ctx = document.getElementById('myChart').getContext('2d');
ctx.canvas.parentNode.style.width = "500px";
ctx.canvas.parentNode.style.height = "500px";
var myChart = new Chart(ctx, .....

Answer 11

制作一个div元素并将图表画布放置在其中，将其命名为canvas-holder。见下文：
```
 <div id="canvas-holder">
    <canvas id="myChart"></canvas>
 </div>
```

使用CSS，指定画布支架的高度和宽度

 #canvas-holder {
    background-color: #FFFFFF;
    position: absolute;
    width: 400px;
    height: 400px;
 }

Charts.js图表未缩放到画布大小

11 个答案:

Charts.js图表​​未缩放到画布大小

11 个答案:

Charts.js图表未缩放到画布大小