如何让我的画布（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等于视口窗口的1％。 width: 100vw会将图表设置为视口的100％，但由于它位于容器中，100vw可能会变宽，因此请使用该值。

  

注意：您可以从W3 CSS Units详细了解vw单元。