Высота chartjs не соответствует родительскому контейнеру

Примечание: я исправил проблему №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. Высота самого внешнего блока составляет 100%. Но по какой-то причине высота id = "graph" становится 150. И холст тоже 150. Я не знаю, откуда эти 150.

  2. Однако данные показаны на графике, все они загромождены в правой части, и у меня есть значения по оси X с 1973 по 2016 год. Но мои данные имеют только 2017 год. Я попытался изменить «границы» и «галочку». source ", но ничего не происходит. (Я обновил заголовок, так как уже исправил это, это вызвано неверными данными)


angular chart.js angular-flex-layout chartjs-2.6.0
person iPhoneJavaDev    schedule 27.07.2018    source источник
comment
Я считаю, что правильно спросил, предоставил свои коды и предпринятое решение.   -  person iPhoneJavaDev    schedule 27.07.2018

Ответы (1)


arrow_upward
3
arrow_downward

Я наконец решил свою проблему. Теперь диаграмма адаптивна.

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

canvas {
  width: 100% !important;
}
person iPhoneJavaDev    schedule 27.07.2018