使用 Chart.js 和 Angular 显示图表的问题

Question

我想使用 chart.js 以角度显示图表。我第一次尝试实现网上的一个例子，编译过程中没有问题。这是我的 .ts 中的代码：

import { Component, OnInit } from '@angular/core';
import { Chart } from "chart.js";

@Component({ 
   ...
})

export class MyChartComponent implements OnInit {
    constructor(){
    }

    ngOnInit(): void {
      new Chart("myChart", {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
    }
}

在我的 .html 中，我有：

<div id="divChart">
  <canvas id="myChart"></canvas>
</div>

但是当我开始服务时，我有这个错误：

ERROR Error: "linear" is not a registered scale.
    _get chart.esm.js:4622
    getScale chart.esm.js:4576
    buildOrUpdateScales chart.esm.js:5224
    each helpers.segment.js:102
    buildOrUpdateScales chart.esm.js:5211
    update chart.esm.js:5336
    Chart chart.esm.js:5096
    ngOnInit my-chart.component.ts:32
    Angular 37
    zUnb main.ts:11
    Webpack 6

ERROR TypeError: area is undefined
    _isPointInArea helpers.segment.js:1266
    getNearestItems chart.esm.js:2465
    nearest chart.esm.js:2548
    getElementsAtEventForMode chart.esm.js:5503
    _handleEvent chart.esm.js:5737
    _eventHandler chart.esm.js:5720
    listener chart.esm.js:5617
    proxy chart.esm.js:3022
    throttled helpers.segment.js:28
    Angular 17
    throttled helpers.segment.js:26
    Angular 14
    addListener chart.esm.js:2905
    createProxyAndListen chart.esm.js:3028
    addEventListener chart.esm.js:3071
    _add chart.esm.js:5605
    bindEvents chart.esm.js:5619
    each helpers.segment.js:102
    bindEvents chart.esm.js:5619
    _initialize chart.esm.js:5129
    Chart chart.esm.js:5094
    ngOnInit my-chart.component.ts:32
    Angular 13

以及许多其他错误。你能帮我吗 ？

Answer 1

import { Chart, registerables} from 'chart.js';

Chart.register(...registerables);

Answer 2

我也有同样的问题，我是这样解决的。 用这个：

import Chart from 'chart.js/auto';

而不是这个：

import { Chart } from 'node_modules/chart.js';

Answer 3

Chart.js 3 是tree-shakeable，因此有必要导入和注册您将要使用的控制器、元素、比例和插件。

请查看Chart.js 文档中的Bundlers（Webpack、Rollup 等）。

在您的情况下，这可以按如下方式完成 ()：

import { Chart, BarElement, BarController, CategoryScale, Decimation, Filler, Legend, Title, Tooltip} from 'chart.js';

export class MyChartComponent implements OnInit {
  
    constructor() {
        Chart.register(BarElement, BarController, CategoryScale, Decimation, Filler, Legend, Title, Tooltip);
    }
    ...
}