设置宽度和高度

Question

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

宽度和高度在canvas元素上以400px/400px内联指定.

但是当渲染图表时,它会被炸成整页宽度,并切断最右端.

见例子

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

This is some bogus text because SO prohibits linking to Codepen otherwise.

Answer 1

你可以覆盖画布样式宽度!important ...

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

Answer 2

您也可以简单地用容器包围图表(根据官方文档http://www.chartjs.org/docs/latest/general/responsive.html#important-note)

<div class="chart-container">
    <canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
    width: 1000px;
    height:600px
}

和选项

responsive:true
maintainAspectRatio: false

Answer 3

在我的情况下,通过responsive: false选项解决了问题.我不确定为什么每个人都告诉你做相反的事情,特别是因为默认是真的.

Answer 4

我不敢相信没有人谈论过使用相对父元素。

代码：

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

资料来源：官方文档

Answer 5

aspectRatio您可以根据您的需要更改：

options:{
     aspectRatio:4 //(width/height)
}