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（我使用角度弯曲布局）和打字稿：

<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。画布也为150。我不知道这150的来源。
数据显示在图表上，但是它们都在最右侧混乱，我在1973年至2016年的x轴值中都有。但是我的数据只有2017年。我尝试更改“边界”和“ tick.source”属性，但是什么也没有发生。（我已经修正了标题，这是由于数据错误导致的）

Answer 1

我终于解决了我的问题。现在，图表可以响应了。

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

canvas {
  width: 100% !important;
}

chartjs高度不跟随父容器

1 个答案: