Почему не прорисовывается график?

Question

[wjvcot]

Использую chart.js и хочу отобразить статистику в графике. Но график сам не отображается, никаких ошибок в консоли не выдает. Что не так, подскажите пожалуйста.

<div class="container" >
    <canvas #state></canvas>
</div>

import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core';
import { StateService } from '../../../shared/services/state.service';
import { State } from '../../../shared/interfaces';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements  OnInit {

  @Input('reports_id') reports_id: string
  @ViewChild('state') stateRef: ElementRef

  constructor(
    private stateService: StateService
  ) { }


  ngOnInit() {
    const stateConfig: any = {
      label: 'Статистика',
      color: 'rgb(255, 99, 132)'
    }

    this.stateService.fetch(this.reports_id).subscribe((data: State[]) => {
      console.log(data)
      stateConfig.data = data.map(item => item.state_time)
      stateConfig.labels = data.map(item => item.density)
      const stateCtx = this.stateRef.nativeElement.getContext('2d')
      stateCtx.canvas.height = '300px'
      new Chart(stateCtx, createChartConfig(stateConfig))
    }
  )}
}

function createChartConfig({labels, data, label, color}) {
  return {
    type: 'line',
    options: {
      responsive: true
    },
    data: {
      labels,
      datasets: [
        {
          label, data,
          borderColor: color,
          steppedLine: false,
          fill: false
        }
      ]
    }
  }
}

Answer 1

[davidnum95]

Ширину и высоту для канваса укажите

Comments

[wjvcot]

Я как бы уже указал высоту
stateCtx.canvas.height = 300 + 'px'

Но затем добавил и ширину и высоту только в html, но ничего не произошло.

Answer 2

[Дмитрий Еремин]

Не очень понятно
вот вы запросили данные и создали новый Chart. И куда его? Просто создали объект, но он же нигде не используется

this.stateService.fetch(this.reports_id).subscribe((data: State[]) => {
      console.log(data)
      stateConfig.data = data.map(item => item.state_time)
      stateConfig.labels = data.map(item => item.density)
      const stateCtx = this.stateRef.nativeElement.getContext('2d')
      stateCtx.canvas.height = '300px'
      new Chart(stateCtx, createChartConfig(stateConfig))
    }
  )

Создайте переменную в компонене chart: any

ngOnInit() {
    const stateConfig: any = {
      label: 'Статистика',
      color: 'rgb(255, 99, 132)'
    }

    this.chart = {};

    this.stateService.fetch(this.reports_id).subscribe((data: State[]) => {
      console.log(data)
      stateConfig.data = data.map(item => item.state_time)
      stateConfig.labels = data.map(item => item.density)
      const stateCtx = this.stateRef.nativeElement.getContext('2d')
      stateCtx.canvas.height = '300px'
      this.chart = new Chart(stateCtx, createChartConfig(stateConfig))
    }
  )}

А в коде используйте значение
<canvas #state>{{ chart }}</canvas>