angular - ERROR 错误：ng-charts 配置错误，渲染图表线需要数据或数据集字段

问题描述

我正在使用ng-charts 2.4.0和chart.js 2.9.3来加载Angular 10.0.14版本中的图表。

图表正在加载，但控制台中出现错误，

ERROR Error: ng-charts configuration error, data or datasets field are required to render chart line

为什么我会收到此错误？有什么建议可以解决这个问题吗？

这是我的 HTML 代码

<div style="display: block;" *ngIf="chartDataReady">
  <canvas baseChart 
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [colors]="chartColor"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

我的类型脚本代码

 public barChartOptions: object;
 public barChartLabels: Label[];
 public barChartType: ChartType = 'line';
 public barChartLegend = true;
 public barChartPlugins = [];
 public chartColor = [];
 public barChartData: any[];

  this.barChartData = [
      {
        data: [
          '427.107858491441',
          '583.107858491441',
          '693.848606343664',
          '843.107858491441',
          '953.848606343664'
        ],
        backgroundColor: 'rgba(0, 165, 165, 1)',
        borderColor: 'rgba(0, 165, 165, 1)',
        fill: false,
        label: 'High 95'
      },
      {
        data: [
          '234.085360485402',
          '390.085360485402',
          '420.873571820389',
          '650.085360485402'
        ],
        backgroundColor: "rgba(187, 41, 25,1)",
        borderColor: "rgba(187, 41, 25,1)",
        fill: false,
        label: "Low 80"
      }
    ];
    this.barChartLabels = ["Jun 1, 2017", "Jul 1, 2017", "Aug 1, 2017", "Sep 1, 2017", "Oct 1, 2017", "Nov 1, 2017", "Dec 1, 2017", "Jan 1, 2018", "Feb 1, 2018", "Mar 1, 2018", "Apr 1, 2018", "May 1, 2018", "Jun 1, 2018", "Jul 1, 2018", "Aug 1, 2018", "Sep 1, 2018", "Oct 1, 2018", "Nov 1, 2018", "Dec 1, 2018"]
    this.barChartOptions = {
      legend: {
        display: true,
        position: 'top',
        labels: {
          fontColor: '#000080'
        }
      },
      title: {
        display: false,
        text: 'Extreme Intervals'
      },
      tooltips: {
        mode: 'index',
        intersect: false
      },
      scales: {
        xAxes: [
          {
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'X-axis Low',
              fontColor: '#000080'
            }
          }
        ],
        yAxes: [
          {
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Y-axis High',
              fontColor: '#000080'
            }
          }
        ]
      }
    };
    this.chartColor = [
        {
          borderColor: 'rgba(0, 165, 165, 1)',
          backgroundColor: 'rgba(0, 165, 165, 1)'
        },
        {
          borderColor: 'rgba(187, 41, 25,1)',
          backgroundColor: 'rgba(187, 41, 25,1)'
        }
      ]

这是我在 ngOnInit() 上加载此数据的类型和 HTML 代码

标签： angularchart.jsng2-charts

收到数据后尝试创建图表。

构建图表后，分配一个像这样的变量。

chartDataReady = true;

在您的 HTML 中，您可以*ngIf像这样包装图表。

*ngIf="chartDataReady"

angular - ERROR 错误：ng-charts 配置错误，渲染图表线需要数据或数据集字段

问题描述

解决方案

推荐阅读