设置宽度和高度

Question

我正在尝试 文档中给出的 Chart.js 示例代码。

宽度和高度在 400px/400px 的画布元素上内联指定。

但是在渲染图表时，它会被放大到整个页面宽度，并切断最右端。

我应该如何/在哪里控制图表的宽度/高度？

原文由 Fellow Stranger 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以覆盖画布样式宽度！重要…

 canvas{

  width:1000px !important;
  height:600px !important;

}

还

在选项下指定 responsive:true, 属性..

 options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

添加选项下的更新： maintainAspectRatio: false,

链接： http ://codepen.io/theConstructor/pen/KMpqvo

原文由 KpTheConstructor 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以创建一个 div 来包装 canvas 标签，

     <div class="wrap">
     <canvas id="myChart"></canvas>
    </div>

    .grafico{
      width: 400px !important;
    }

js图表选项的任何变化

var myChart = new Chart(ctx, {
    type: 'bar', //doughnut, bar, line, radar, pie, polarArea
    data: data,
    options: {

      scales: {
        y: {
          beginAtZero: true,
          stepSize: 1
        }

      }
    },
  });
};

原文由 esleyder ordoñez 发布，翻译遵循 CC BY-SA 4.0 许可协议