Question

我的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
              }
            }
          ]
        }
      },
    });
  }

Answer 1

通过npm安装chartjs或您拥有什么之后：

import { Chart } from 'chart.js';

app.component.ts

@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>

如何在angular 7中使用chart.js

1 个答案: