Angular 12 + Chartjs 3.3.2 TypeError：无法读取属性“左”答案

【问题标题】：Angular 12 + Chartjs 3.3.2 TypeError: Cannot read property 'left'Angular 12 + Chartjs 3.3.2 TypeError：无法读取属性“左”
【发布时间】：2021-06-05 15:22:21
【问题描述】：

在尝试学习角度时，我遇到了一个小障碍。我想显示从 api 获得的数据。但就目前而言，我尝试创建一个具有预定义值的图表，稍后我将其更改为获取响应值。这是我采取的步骤：

npm install chart.js
ViewChart.component.html <div width="100%"><canvas id="myChartTest" width="400" height="400"></canvas></div>
ViewChart.component.ts

import { Chart, LineController, LineElement, PointElement, LinearScale, Title } from 'chart.js';
Chart.register(LineController, LineElement, PointElement, LinearScale, Title);

Component({
   selector: 'app-view-chart',
   templateUrl: './ViewChart.component.html',
   styleUrls: ['./ViewChart.component.scss']
})

export class ViewChartComponent implements OnInit {

   ngAfterViewInit() {

       var myChart = new Chart('myChartTest', {
           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
                   }
               }
           }
       });

   }

项目编译没有任何错误。但是当我查看它时，我得到了这些错误

错误类型错误：无法读取未定义的属性“左” 在 _isPointInArea (helpers.segment.js:1278) 在 Chart._handleEvent (chart.esm.js:5876) 在 Chart._eventHandler (chart.esm.js:5855) 在侦听器处 (chart.esm.js:5738) 在 Chart.event (chart.esm.js:3083) 在 helpers.segment.js:28 在计时器 (zone.js:2561) 在 ZoneDelegate.invokeTask (zone.js:406) 在 Object.onInvokeTask (core.js:28654) 在 ZoneDelegate.invokeTask (zone.js:405)

core.js:6456 错误类型错误：无法读取未定义的属性“左侧” 在 _isPointInArea (helpers.segment.js:1278) 在 getNearestItems (chart.esm.js:2523) 在最近 (chart.esm.js:2609) 在 Chart.getElementsAtEventForMode (chart.esm.js:5621) 在 Chart._handleEvent (chart.esm.js:5872) 在 Chart._eventHandler (chart.esm.js:5855) 在侦听器处 (chart.esm.js:5738) 在 Chart.event (chart.esm.js:3083) 在 helpers.segment.js:28 在计时器（zone.js:2561）

【问题讨论】：

标签： javascript angular chart.js

【解决方案1】：

问题似乎在于您导入的 Chart。您正在尝试显示 bar 图表，但尚未导入。您还需要导入BarElement。测试您的图表是否正在呈现的一种更短的方法是仅导入以下内容：

import Chart from 'chart.js/auto';

您可以参考 chart.js 文档的 integration 部分以了解可能缺少的内容，或者这里是一个示例 stackblitz。

【讨论】：