angular - 如何在angular 7中使用chart.js

我的chart.js没有显示
是一个管理仪表板，我试图显示一个年度收入的图表。但在传递真实数据之前，我正在尝试教程。

ngOnInit() {
    this.createChart();
  }

  createChart() {
    const revenueLineChart = new Chart('revenueLineChart', {
      type: 'line',
      data: {
        labels: Object.values(Months),
        datasets: [
          {
            label: 'Monthly Revenues For The Year',
            data: [2, 3, 5, 7, 8, 6, 7, 9, 4, 3, 0, 8],
            fill: false,
            lineTension: 0.2,
            borderColor: 'red',
            borderWidth: 1,
          }
        ],
      },
      options: {
        title: {
          text: 'Monthly Revenue',
          display: true
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      },
    });
  }

最佳答案

在通过npm安装chartjs之后，或者您已经：

import { Chart } from 'chart.js';

应用组件

@ViewChild('revenueLineChart') chart: ElementRef;

ngAfterViewInit() { this.createChart() }

createChart() {
   const ctx = this.chart.nativeElement.getContext('2d');
   const revenueLineChart = new Chart(ctx, { // ... });
   // .. the rest of your settings
}

app.component.html软件

<canvas #revenueLineChart></canvas>