TypeError: Cannot read property 'legend' of undefined | Angular + ng2-charts

Question

我在 angular 中尝试显示 chartjs 图表的示例数据时收到 TypeError: Cannot read property 'legend' of undefined。

我试过使用不同的示例或图表类型，但它总是抛出此错误。

HTML:

<div class="chartwrapper">
  <canvas baseChart class="chart"
          [datasets]="arbarChartData"
          [labels]="arbarChartLabels"
          [options]="arbarChartOptions"
          [legend]="arbarChartLegend"
          [chartType]="arbarChartType">
  </canvas>
</div>

技术人员：

public arbarChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public arbarChartType = 'bar';
public arbarChartLegend = true;
public arbarChartData: ChartDataSets[] = [
  {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
  {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
];

Answer 1

从您的 html 中删除 [legend]="arbarChartLegend"。

在 TS 中，arbarChartOptions: any = { legend: { display: true, labels: { fontColor: 'black' } }

Answer 2

对我来说初始化空 arbarChartOptions 就足够了，比如：

public arbarChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public arbarChartType = 'bar';
public arbarChartLegend = true;
public arbarChartData: ChartDataSets[] = [
  {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
  {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
];
public arbarChartOptions: ChartOptions = {}

解决错误

TypeError: Cannot read property 'legend' of undefined | Angular + ng2-charts

TypeError: Cannot read property 'legend' of undefined | Angular + ng2-charts

chart.js

ng2-charts

angular