angular - chartjs 高度不跟随父容器

Question

注意：我已经修复了问题 #2，这是错误的数据。我仍然面临问题＃1。我有以下折线图配置。我的数据集示例数据是

{x：'29/01/2017'，y：'0.00234'}

options: {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        format: 'DD/MM/YYYY'
      }
    }]
  }
}

另外，我有 html（我使用 angular flex-layout）和打字稿：

<div fxFlex style="height: 100%">
    <div id="graph">
        <canvas id="canvasGraph">{{chart}}</canvas>
    </div>
</div>

// Hoping I can change the size of canvas to be the same as the parent
const canvas = <HTMLCanvasElement>document.getElementById('canvasGraph');
canvas.width = document.getElementById('graph').offsetWidth;
canvas.height = document.getElementById('graph').offsetHeight;

我有 2 个（现在只剩下 1 个）问题：

1. 最外层的 div 高度为 100%。但是由于某种原因，id="graph"的高度变成了150。而画布也是150。不知道这个150是从哪里来的。

2. 然而，数据显示在图表上，它们都在最右侧杂乱无章，我的 x 轴值从 1973 年到 2016 年。但我的数据只有 2017 年。我尝试更改“边界”和“刻度”。源”属性，但没有任何反应。（我更新了标题，因为我已经修复了这个，它是由错误的数据引起的）

Answer 1

我终于解决了我的问题。现在图表是响应式的。

#graph{
  position: relative;
  height: 100%;
  width: 100% !important;
}

canvas {
  width: 100% !important;
}