使用Chart.js和Angular显示图表时出现问题

col17t5w 于 2022-11-06 发布在 Chart.js

关注(0)|答案(4)|浏览(266)

我想显示一个图表使用chart.js在Angular 。在第一次我尝试实现一个例子采取了在网上，我没有问题编译。这是代码在我的.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

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

chart.js

来源：https://stackoverflow.com/questions/67238650/problem-for-display-a-chart-with-chart-js-and-angular

4条答案

按热度按时间

5q4ezhmt1#

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

Chart.register(...registerables);

赞(0）回复(0）举报 2022-11-06

pftdvrlh2#

Chart.js 3是tree-shakeable，因此需要导入并注册您将要使用的控制器、元素、秤和插件。
请查看Chart.js文档中的捆绑包（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);
    }
    ...
}

赞(0）回复(0）举报 2022-11-06

xqk2d5yq3#

我也有同样的问题，我用这种方法解决了它。使用此：

import Chart from 'chart.js/auto';

而不是这样：

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

赞(0）回复(0）举报 2022-11-06

mm9b1k5b4#

要注册它*延迟***，请使用构造函数**

constructor(){
       Chart.register(...registerables);
    }

赞(0）回复(0）举报 2022-11-06

我来回答

使用Chart.js和Angular显示图表时出现问题

4条答案

相关问题

热门标签

最新问答