javascript - 如何让我的 Canvas (chart.js) 在不同的设备上调整大小？

Question

我有一个 Canvas :

<canvas id="chart1" width="1000" height="250"></canvas>

但在我的手机上，它会展开。 See screenshot.

我试着让 width="100%" 变小了。

<canvas id="chart1" width="100%" height="250"></canvas>

我的手机screenshot .

var ctx = $('#sht1_chart').get(0).getContext('2d');
var sht1Chart = new Chart(ctx).Line({
  labels: [],
  datasets: [
    {
      label: "Temperature (Celsius)",
      fillColor: "rgba(63,63,191,0.2)",
      strokeColor: "rgba(63,63,191,1)",
      pointColor: "rgba(63,63,191,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(63,63,191,1)",
      data: []
    },
    {
      label: "Humidity (%)",
      fillColor: "rgba(63,191,191,0.2)",
      strokeColor: "rgba(63,191,191,1)",
      pointColor: "rgba(63,191,191,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(63,191,191,1)",
      data: []
    }
  ]
});

更新

顺便说一下，它在一个容器中。

<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        HOT SPOT 1 (Location: Extreme West Middle)
      </div>
      <div class="panel-body">
        <p>Temperature: <span id='temp1_value'></span>
        Humidity: <span id='hum1_value'>
        </p>
        <canvas id='sht1_chart' height='250'></canvas>
      </div>
    </div>
  </div>
</div>

CSS 似乎不起作用？

#canvas  {
  width: 100%;
  border: solid 1px blue;
}

Answer 1

检查父容器

width: 100% 应该可以正常工作。检查父容器以确保它的 width 设置正确。

使用vw单位

如果您想尝试其他解决方案，请尝试使用 vw 单位来设置宽度。每个 1vw 等于视口(viewport)窗口的 1%。 width: 100vw 会将图表设置为视口(viewport)的 100%，但由于它在容器中，100vw 可能太宽了，所以请使用该值。

Note: You can learn more about the vw unit from W3 CSS Units.