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

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性能不是以像素但其比例的大小.

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

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

您可以通过设置maintainAspectRatio为false 来禁用此功能.

Answer 3

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

1. 将画布标签样式设置为 100% 的宽度和高度。这将确保它始终适合其容器宽度和高度的 100%。
2. 对于选项值设置responsive: true 和maintainAspectRatio: false。这将确保图形在忽略纵横比的同时响应大小的更新。

下面是我使用的代码：

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

    html
    <canvas id="myGraph" />

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

     options: {
                responsive: true,
                maintainAspectRatio: false
              }

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

Answer 4

在你的选择中,设置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 5

聚会有点晚了，但我在这个问题上挣扎了很多，特别是在有多个图表的页面上。

这个小花絮解决了这一切 - 我的图表现在都很好地适合，并根据它们所在的 div 调整大小。

将此添加到您的页面样式（8px 是个人偏好。如果需要，请更改）：

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

对于适当的 Div：

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

Answer 6

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

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

参考：Chart.js 画布调整大小