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

Question

我正在使用 ng-charts 2.4.0 和 chart.js 2.9.3 在 [=25] 中加载图表=]Angular10.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)'
        }
      ]

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

Answer 1

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

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

chartDataReady = true;

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

*ngIf="chartDataReady"

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

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

angular

chart.js

ng2-charts