0

我之前在这里问过一个问题， 最后我找到了解决方案，但是图表上有问题，我们必须显示 4 条图表线但没有显示，第一条图表线（订单系列）是问题，没有图表线出现。但是，当我禁用其他（3 个其他图表线）并启用第一条图表线时，只出现第一条图表线。

在我的浏览器控制台中出现：

错误类型错误：无法读取 Object.eval [as updateRenderer] (XAxisTicksComponent.html:5) at Object.debugUpdateRenderer [as 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)返回：

图 1

图 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>

如何解决问题？

请帮帮我 。

先感谢您

4

0 回答 0