Html 设置宽度和高度

我正在尝试Chart.js的示例代码

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

但是当呈现图表时，它会放大到整页宽度，并切断最右端

---

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

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

canvas{

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

}

也

在选项下指定

responsive:true，

属性

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

添加选项下的更新：

maintaintAspectRatio:false，

---

链接：

使用这个，它可以正常工作

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

---

在我的例子中，在选项下传递

responsive:false

解决了问题。我不知道为什么每个人都告诉你要做相反的事情，特别是因为默认值为true。

你也可以简单地用容器包围图表（根据官方文件）

还有选择权

responsive:true
maintainAspectRatio: false

---

上面没有提到，但是在画布元素上使用

max width

或

max height

也是一种可能性。

下面的内容对我很有用-但别忘了将其放在“选项”参数中

---

这对我的情况有帮助：

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

---

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

代码：

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

---

来源：

您可以根据需要更改

aspectRatio

：

选项：{
纵横比：4/（宽/高）
}

您可以创建一个div来包装画布标记

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

    .grafico{
      width: 400px !important;
    }

---

谢谢，您的

maintaintAspectRatio:false

使图表可见。但仍然切断了右侧的连接。用他们自己的基本示例代码来解决这些问题让我怀疑chart.js是否是一个好的选择。（右侧仍然被切断…）这解决了图形大小的问题，图形没有缩放以适应它。有没有一种方法可以从Chart.js中设置图形大小？事实证明，您需要关闭responsive以使图形符合给定的大小。遗憾的是，似乎没有办法控制它并保持响应性…使用“！important”并不是解决这个问题的正确方法，即使它有效@下面的Nicolas解决方案“在一个div中包装画布”是一种更好的方法，因为我们可以控制画布的大小，使其达到我们想要的效果。这里的关键是使用一个外部div，并在其上设置宽度和高度，而不是画布元素。为了实现这一点，图表容器应该相对定位。对我来说是可行的，但只适用于

！重要信息

，此处相同。设置

responsive:true

完全扭曲了图表的外观。对我有效，但只适用于

！重要信息

在我的角度投影中，您能说明这是如何工作的吗<代码>4不是纵横比。您的评论是

（宽度/高度）

，但不清楚该如何应用。有没有办法将其作为一组传递？或者你的字面意思是将建议的宽度除以建议的高度，例如，3:4变为

0.75

？你的答案与之有什么不同？不要绕过规则发布代码笔的链接；按照规则所说的去做，并加入一个。

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

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

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

    .grafico{
      width: 400px !important;
    }

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

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

      }
    },
  });
};