Wie zwei Diagramme auf einer Seite mit angular2 angezeigt werden

Question

Ich habe zwei Diagramme, die ich auf separaten Divs auf der gleichen Seite laden möchte. Ich habe diesen Code ausprobiert, aber es funktioniert nicht, wenn ich weiß, dass es korrekt funktioniert, wenn ich ein Diagramm auf der Seite anzeige. Die beiden Codes sind nur den Daten ähnlich, die sich ändern. Ich denke, das Problem liegt in der Vorlage. Kann mir jemand helfen, eine Lösung zu finden? Ich arbeite mit angular2-highchart.

@Component({ 
selector: 'chartist-js', 
template: ` 
<chart [options]="chartOptions$ | async" style="min-width: 1000px;"> 
</chart> <br><chart [options]="chartOptions1$ | async" style="min- 
    width: 1000px;"></chart>`, 
providers : [ChartistJsService] 
    }) 
export class ChartistJs { 
chartOptions$: Observable<any>; 
chartOptions1$: Observable<any>; 

constructor(private dataService: ChartistJsService) { 
this.chartOptions$ = this.dataService.chartData$ 
this.chartOptions1$ = this.dataService.chartData$ 
.map(data => 
{this.createChartOptions(data),this.createChartOptions_(data)}); 
    } 

ngOnInit() { 
// triggers a fetch of the data to feed the observable 
this.dataService.getData(); 

    } 

private createChartOptions(data) { 
    return { 
    chart: { 
     type: 'line' 
     }, 
     xAxis: { 
      type: 'datetime', 
      categories: 
       data.result.map(function (obj) { 
        console.log(obj._id) 
        return obj._id; 
       }) 

     }, 
     yAxis: { 
      title: { 
       text: 'ce' 
      } 
     }, 
     series: [{ 
      name: 'eddddd', 
      data: data.result.map(function (obj) { 
       console.log(obj.amount) 
return obj.amount; }) 
                            } 
     ] 

    }; 
} 

    private createChartOptions_(data) { 
    return { 
     chart: { 
     type: 'line' 
     }, 
     xAxis: { 
      type: 'datetime', 
      categories: 
       data.result.map(function (obj) { 
        return obj._id; 
       }) 

     }, 
     yAxis: { 
      title: { 
       text: 'sd' 
      } 
     }, 
     series: [{ 
      name: 'sdf', 
      data: data.result1.map(function (obj) { 
      return obj.taux; })                          
       }] 
     }; 
    } 
    } 

Answer 1

Es sieht so aus, als ob Sie den gleichen beobachtbaren Datenstrom in beide Diagramme übertragen. Irgendwo auf dem Weg könnten die Daten in jedem Diagramm mutiert werden - deshalb bricht es, wenn Sie zwei Diagramme haben. Jedes Diagramm mutiert die Daten und bricht die anderen. Aber wenn es nur 1 Diagramm gibt, ist es in Ordnung. Versuchen 2 Dinge, erstens, eine Kopie jedes Element im Array, bevor sie mit ihm etwas zu tun:

this.chartOptions$ = this.dataService.chartData$ 
    .map(data => Object.assign({}, data); 
this.chartOptions1$ = this.dataService.chartData$ 
    .map(data => Object.assign({}, data); 

Wenn das nicht ich nicht funktionieren würde versuchen hartzucodieren 2 völlig unabhängige Objekte in 2 Diagrammen und sehen, ob das 2 Diagramme werden gerendert. Dann werden Sie sicher wissen, ob das Teilen Ihre Probleme verursacht.