ngx-charts-line-chart 失败，无法读取未定义的属性“getColor”

Question

我正在设置一个简单的折线图示例，但由于未定义错误而导致 getColor 失败。如果我删除 [结果] 数据，图表会显示，但会因缺少数据而失败。不知道如何追踪这个问题？

使用 ngx-charts 12.0.1 我从 https://github.com/marjan-georgiev/Angular-CLI-ngx-charts-Demo 复制了示例代码，然后将第二个图表添加到了主页，如下例所示。

我尝试删除尽可能多的变量以获得结果。

标签：

<div style="height: 100px">
  <ngx-charts-line-chart
    [view]="view"
    [results]="single"
    class="chart-container"
    [scheme]="colorScheme"
    [legend]="showLegend"
    [gradient]="gradient"
    [xAxis]="showXAxis"
    [yAxis]="showYAxis"
    [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel"
    [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel"
    (select)="onSelect($event)"
    (activate)="onActivate($event)"
    (deactivate)="onDeactivate($event)"
  >
  </ngx-charts-line-chart>
</div>

component data:
single: any[] = [
    {
      name: "Germany",
      value: 8940000
    },
    {
      name: "USA",
      value: 5000000
    },
    {
      name: "France",
      value: 7200000
    },
    {
      name: "Mars",
      value: 720000
    }
  ];


  colorScheme = {
    domain: ["#5AA454", "#A10A28", "#C7B42C", "#AAAAAA"]
  };

Console Error with [results]: 
    ERROR TypeError: Cannot read property 'getColor' of undefined
    at Object.eval [as updateDirectives] (LineSeriesComponent.html:14)


Console Error without [results]:
The chart is build on the page and, of course, empty. The following
error shows up when I click on any portion of the empty chart.

Error: <rect> attribute x: Expected length, "NaN".  
    platform-browser:1973

Answer 1

尽管它抱怨颜色，但我发现问题出在系列数据的格式化方式上。我复制并粘贴了此折线图演示中的数据，它似乎已经自行解决了。如果将来有人遇到类似的问题，请验证您的数据格式。

OP数据的正确格式应该是：

single: any[] = [
    {
      name: "Germany",
      series: [
         { 
           name: "1990",
           value: 8940000
         }
      ]
    },
    {
      name: "USA",
      series: [
         { 
           name: "1990",
           value: 5000000
         }
      ]
    },
    {
      name: "France",
      series: [
         { 
           name: "1990",
           value: 7200000
         }
      ]
    },
    {
      name: "Mars",
      series: [
         { 
           name: "1990",
           value: 720000
         }
      ]
    }
  ];