【问题标题】: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>

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2017-02-22
        • 2013-11-19
        • 2020-01-28
        • 2023-02-03
        • 1970-01-01
        • 2017-05-29
        • 1970-01-01
        相关资源
        最近更新 更多