Angular4中的堆积条形图

时间:2017-07-26 13:04:21

标签: angular d3.js typescript-typings stacked-chart

我正在尝试将d3.js堆积条形图应用于Angular4。查看stack()上的github引用,我在我的组件中有这个

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

显然这只是一个快照。最后一行中的'datas'导致了这个问题,enter image description here但为什么'系列'和可能的'堆栈'变量在'数据'数组中的键有困难?

我也在使用d3-ng2-service

1 个答案:

答案 0 :(得分:0)

我已成功使用

消除错误
let stack: any;
let series: any;

在文件的开头并从每个文件中删除'var'。