如何在不同的設備上調整畫布（chart.js）的大小？

Question

我有一塊canvas ：

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

但是在我的手機上，它可以擴展。 查看截圖。

我嘗試使width="100%"但使它們變小。

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

我的手機屏幕截圖 。

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單元的更多信息。