设定宽度和高度 [英] Setting width and height

问题描述

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

I'm trying out the example code for Chart.js given in the docs.

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

Width and height is specified inline on the canvas element at 400px/400px.

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

But when rendering the chart it's blown up to full page width, and cuts off the far right end.

参见示例

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

How/where am I supposed to control the width/height of the chart?

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

推荐答案

您可以覆盖画布样式的宽度！important ..

You can override the canvas style width !important ...

canvas{

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

}

还

在选项下指定 response：true，属性。

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

更新在添加的选项下： maintainAspectRatio：false，

update under options added : maintainAspectRatio: false,

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

这篇关于设定宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！