Question

我之前曾问过一个问题here 终于我找到了解决方案，但是在图形上有一个问题，我们必须显示4条图表线，但是什么也没显示，第一个图表线（订单系列）是问题所在，没有任何图表线出现。但是，当我禁用其他图表（其他3条图表线）并启用第一条图表线时，只会显示第一条图表线。

在我的浏览器控制台中显示：

错误TypeError：无法读取未定义的属性“构造函数” 在XAxisTicksComponent.tickFormat（index.js：6489）在Object.eval [作为updateRenderer]（XAxisTicksComponent.html：5）在Object.debugUpdateRenderer [作为updateRenderer]（core.js：11948）在checkAndUpdateView（core.js：11320）在callViewAction（core.js：11556）在execEmbeddedViewsAction（core.js：11519）在checkAndUpdateView（core.js：11316）在callViewAction（core.js：11556）在execComponentViewsAction（core.js：11498）在checkAndUpdateView（core.js：11321）

在搜索修复它之后，我将其添加到了.html文件中：

[xAxisTickFormatting]='xAxisTickFormatting'

以及我的.ts文件中：

xAxisTickFormatting(val: string): string {
console.log(this.ticks);
}

console.log（this.ticks）返回：

image 1

image 2

这是我在.ts文件中的代码：

dataChart: any[] = [   
     {
      'name': 'orders',
      'series': []
    },
    {
      'name': 'invoices',
      'series': []
    },
    {
      'name': 'customers',
      'series': []
    },
    {
      'name': 'products',
      'series': []
    }
  ];



 private loadChart() {
    this.service.getChartData().subscribe(
     res => { console.log(res['data']);

  if (res['status_code'] === 200) {

let invoices= res['data'][0]['serieInvoices'];
let orders= res['data'][0]['serieOrders'];
let customers= res['data'][0]['serieCustomers'];
let products= res['data'][0]['serieProducts'];
let i  :number;

for (i=0;i<orders.length;i++){
      this.dataChart[0].series.push({
    'name':  orders[i]['date'],
    'value': orders[i]['nbre'] ,
}); 
}

for (i=0;i<invoices.length;i++){
      this.dataChart[1].series.push({
    'name': invoices[i]['date'],
    'value': invoices[i]['nbre'] ,
});

}

for (i=0;i<customers.length;i++){
      this.dataChart[2].series.push({
    'name': customers[i]['date'],
    'value': customers[i]['nbre'] ,
});

}

for (i=0;i<products.length;i++){
      this.dataChart[3].series.push({
    'name': products[i]['date'],
    'value': products[i]['nbre'] ,
});

}

this.dataChart = [...this.dataChart];
}

},
  err => {

}
)
}

这是我在.html文件中的代码：

<div class="col-xxl-12">
      <nb-card class="card-coubes" style="height:auto;">
        <nb-card-body>
          <ngx-charts-line-chart
                    [view]="view"
                    [scheme]="colorScheme"
                    [results]="dataChart"
                    [gradient]="gradient"
                    [xAxis]="showXAxis"
                    [yAxis]="showYAxis"                                     
                    [legend]="showLegend"
                    [showXAxisLabel]="showXAxisLabel"
                    [showYAxisLabel]="showYAxisLabel"
                    [xAxisLabel]="xAxisLabel"
                    [yAxisLabel]="yAxisLabel"
                    [autoScale]="true"
                    [timeline]="timeline"
                    (select)="onSelect($event)">
          </ngx-charts-line-chart>
        </nb-card-body>
      </nb-card>
</div>

如何解决该问题？

请帮助我。

先谢谢您

错误TypeError：无法读取undefined，ngx-charts的属性'toString'

0 个答案: