调整 Chart.js 图表的大小答案

【问题标题】：Resizing a Chart.js chart调整 Chart.js 图表的大小
【发布时间】：2021-07-30 02:12:16
【问题描述】：

图表跨越整个网页，我无法调整它的大小。我试过设置画布和画布的高度/宽度，但没有成功。这是我的 HTML：

<div id="chartbox">
<canvas id="myChart" display="block"></canvas>
</div>


<script>
var xaxis = [1,2,3,4,5]
var yaxis = [2,3,4,5,6]


var thisChart = new Chart(document.getElementById("myChart"), {
  type: 'line',
  options: {
    responsive: true
},
  data: {
    labels: xaxis,
    datasets: [
      {
        data: yaxis,
        label: "Test",
        borderColor: "#3e95cd",

      }
    ]
  }
});


</script>

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

如果您使用非相对值直接设置 canvas 元素的样式，则需要在选项中将 responsive 设置为 false，如果您使用相对值设置宽度样式，则需要将它们应用于周围的 div

https://www.chartjs.org/docs/master/configuration/responsive.html

【讨论】：

【解决方案2】：

希望我的回答对你有所帮助，你只需要为图形的父元素指定一定的CSS规则即可。

var xaxis = [1,2,3,4,5]
var yaxis = [2,3,4,5,6]


var thisChart = new Chart(document.getElementById("myChart"), {
  type: 'line',
  options: {
    responsive: true
},
  data: {
    labels: xaxis,
    datasets: [
      {
        data: yaxis,
        label: "Test",
        borderColor: "#3e95cd",

      }
    ]
  }
});

#chartbox {
  display: block;
  width: 400px;
  height: 400px;
}

<div id="chartbox">
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

【讨论】：