2017-07-26 1 views
1

J'essaye d'appliquer un diagramme à barres empilées d3.js à Angular4. En regardant la référence stack() sur github, j'ai cet intérieur de mon élémentDiagramme à barres empilées en Angular4

ngOnChanges(){ 
    console.log("change detected"); 
    let self = this; 
    let d3 = this.d3; 
    let d3ParentElement: any; 
    let svg: any; 
    let width: number = 500; 
    let height: number = 150; 

    if (this.parentNativeElement !== null) { 
     d3.select("svg").remove(); 
     svg = d3.select(this.parentNativeElement) 
     .append('svg') 
     .attr('width', width) 
     .attr('height', height); 

     var datas = [ 
     {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400}, 
     {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400}, 
     {month: new Date(2015, 2, 1), apples: 640, bananas: 960, cherries: 640, dates: 400}, 
     {month: new Date(2015, 3, 1), apples: 320, bananas: 480, cherries: 640, dates: 400} 
     ]; 

     var stack = d3.stack() 
     .keys(["apples", "bananas", "cherries", "dates"]) 
     .order(d3.stackOrderNone) 
     .offset(d3.stackOffsetNone); 

     var series = stack(datas); 
} 

Évidemment, cela est juste un instantané. 'datas' dans la dernière ligne provoque cela, enter image description here Mais pourquoi les variables 'série' et éventuellement 'pile' ont-elles des difficultés avec les clés du tableau 'datas'? J'ai également utilisé le d3-ng2-service.

+1

Bien sur vous pour la mise à jour avec la réponse - peut-être mettre une note en haut que vous avez compris. À votre santé. – Ryan

Répondre

0

j'ai réussi à se débarrasser de l'erreur à l'aide,

let stack: any; 
let series: any; 

au début du fichier et le retrait du « var » de chacun.