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;
}