用图表js制作的图表不会改变大小？答案

【问题标题】：Graph made with chart js wont change size?用图表js制作的图表不会改变大小？
【发布时间】：2020-07-15 09:03:11
【问题描述】：

我正在尝试学习 javascript 中的图表库并遇到了 chart.js

我刚刚从他们的installation front page 复制了代码，如下所示。

我的问题是，为什么改变canvas元素标签中的height和width参数实际上并没有改变图表的大小？

我相信这是在chart js的网站上解释的“无法直接从canvas元素检测画布大小的变化。Chart.js使用其父容器来更新画布渲染和显示大小。但是，这种方法需要容器要相对定位并仅专用于图表画布。然后可以通过设置容器大小的相对值来实现响应性（示例）："。

但是我不明白他们指的是什么容器作为父容器，因为我找不到任何我在我的代码中指定的可以称为父容器的容器（对于 html、css 和 js 来说都是新的）。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

你在这里遇到的这个问题是chartJS会忽略canvas元素上的宽度/高度，所以你需要将canvas元素包裹在一个div中.....

<div style="width:400px;height:600px">
    <canvas id="myChart"></canvas>
</div>

【讨论】：