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

问题描述

我想使用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

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

标签： angularchart.js

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

问题描述

解决方案

推荐阅读