Angular4 中的堆积条形图 [英] Stacked bar Chart in Angular4

问题描述

我正在尝试将 d3.js 堆积条形图应用于 Angular4.查看 但是为什么系列"和可能的堆栈"变量在使用数据"数组中的键时有困难?>

我也在使用 d3-ng2-service.

解决方案

我已经成功地摆脱了错误使用，

let stack: any;让系列:任何；

在文件的开头并从每个文件中删除var".

I am trying to apply a d3.js stacked bar chart to Angular4. Looking at the stack() reference on github, I have this inside my component

  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);
}

Obviously this is just a snapshot. 'datas' in the last line is causing this, But why are the 'series' and possibly 'stack' variables having difficulty with the keys in the 'datas' array?

Also I am using the d3-ng2-service.

解决方案

I have succeeded in getting rid of the error using,

let stack: any;
let series: any;

at the beginning of the file and removing the 'var' from each.

这篇关于Angular4 中的堆积条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！