Angular Charts.js Rending пустой холст

Question

У меня возникли проблемы с получением angular charts.js для работы с моим диалогом.Сначала я следовал инструкциям, приведенным в этой ссылке, https://coursetro.com/posts/code/126/Let's-build-an-Angular-5-Chart.js-App---Tutorial,, которая предназначена для Angular 5. Я просто скопировал тестовые данные в мой массив угловых классов.Когда я запускаю приложение, мой диалог пуст.Я нашел еще одну ссылку на charts.js, которая https://dev.to/wiaio/implementing-a-chartjs-line-chart-in-your-angular-application-19d7. Внесенные мной изменения

HTML

<div *ngIf="chart">
        <canvas id="canvas">{{chart}}</canvas>
    </div> 
to 
<canvas #dataChart>{{ chart }}</canvas>

В моем коде TS

я добавилследующее

export class ChartComponent implements OnInit {

 @ViewChild('dataChart') private chartRef
  chart: any;
ngOnInit() {

  var temp_max = [279.946, 282.597, 280.15];
  var temp_min = [279.946, 282.597, 278.15];
  var alldates = [1485717216, 1485745061, 1485768552];

  let weatherDates = []

  let jsdate1 = new Date(1485717216 * 1000);
  weatherDates.push(jsdate1.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }));
  let jsdate2 = new Date(1485745061 * 1000);
  weatherDates.push(jsdate2.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }));
  let jsdate3 = new Date(1485768552 * 1000);
  weatherDates.push(jsdate3.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }));

    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'line',
      data: {
        labels: weatherDates,
        datasets: [
          { 
            data: temp_max,
            borderColor: "#3cba9f",
            fill: false
          },
          { 
            data: temp_min,
            borderColor: "#ffcc00",
            fill: false
          },
        ]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{ 
            display: true
          }],
        }
      }
    });
  }

Я установил точку останова непосредственно перед тем, как уйти, и проверил диаграмму this.chart, а при наведении указателя мыши на this.chart отображается следующее содержимое.Я изменил код несколько раз.Я даже изменяю объявление диаграммы на диаграмму: Диаграмма, но она не работает.Онлайн пример выглядит прямо, но я могу проследить ошибку, которая вызывает пустое диалоговое окно.

Любая помощь для гуру приветствуется.Спасибо.

_bufferedRender: false _listeners: Object {mousemove:, mouseout:, click:,…} $ plugins: Object {descriptors: Array (3), id: 3} animating: true aspectRatio:2 блока: Array (4) [ChartElement, ChartElement, ChartElement,…] canvas: canvas.chartjs-render-monitor {$ chartjs: Object, __zone_symbol__mousemovefalse: Array (1), __zone_symbol__mouseoutfalse: Array (1),…} диаграмма:{id: 1, ctx: CanvasRenderingContext2D, canvas: canvas.chartjs-render-monitor,…} chartArea: Object {left: 71.7158203125, top: 6, right: -71.7158203125,…} config: Object {type: "line",данные: объект, параметры: объект} контроллер: диаграмма {id: 1, ctx: CanvasRenderingContext2D, canvas: canvas.chartjs-render-monitor,…} ctx: CanvasRenderingContext2D {canvas: canvas.chartjs-render-monitor, globalAlpha: 1,globalCompositeOperation: "source-over",…} currentDevicePixelRatio: 1 data: высота объекта: 0 id: 1 lastActive: Array (0) [] legend: ChartElement {ctx: CanvasRenderingContext2D, параметры: объект, диаграмма:Диаграмма,…}

Answer 1

проблема в том, что chartRef не определен.Вы можете использовать

<canvas id=chart> in your html

и использовать диаграмму в конструкторе Chart или использовать метод установки:

chartRef;
@ViewChild('dataChart') set ref(ref: ElementRef) {
    this.chartRef = ref;
}

Я сделал рабочий пример в stackblitz, # 14, компонент - chart-пример

Надеюсь, это поможет