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)和 typescript :

<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 个)问题:

最外面的 div 高度是 100%。但是不知什么原因，id="graph"的高度变成了150，而canvas也是150，不知道这150是从哪里来的。

数据显示在图表上，然而，它们都在最右侧杂乱无章，我的 x 轴值从 1973 年到 2016 年。但我的数据只有 2017 年。我尝试更改“边界”和“刻度线”。源”属性，但什么也没有发生。
(我更新了标题，因为我已经解决了这个问题，这是由错误的数据引起的)

Answer 1

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

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

canvas {
  width: 100% !important;
}