可以从d3放样条形图的数据列表中获取x和y轴值

时间:2019-05-27 09:52:02

标签: angular typescript d3.js stacked-chart

我用角型打字稿实现了一个静态的堆叠条形图 我想从服务从后端获取的列表中的x和y轴上加载动态数据。

this.initMargins();
    this.initSvg();
    this.List = this.route.snapshot.data['list'];
    this.bindStatusDropdown();
    this.data = 
         [{ year: "2006", Timeremainng: 10, overdeadline: 5, noticeperiod: 9, completed: 4 },
        { year: "2007", Timeremainng: 12, overdeadline: 8, noticeperiod: 9, completed: 4 },
        { year: "2008", Timeremainng: 4, overdeadline: 40, noticeperiod: 5, completed: 5 }]; 
    this.drawChart(this.data);` private initSvg() {
    this.svg = d3.select('svg');

    this.width = +this.svg.attr('width') - this.margin.left - this.margin.right;
    this.height = +this.svg.attr('height') - this.margin.top - this.margin.bottom;
    this.g = this.svg.append('g').attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

    this.x = d3Scale.scaleBand()
        .domain(this.data.list(function (d) {
            return d.year;
        })
            .rangeRound([5, 100])
            .paddingInner(1)
            .align(0.1));
    this.y = d3Scale.scaleLinear()
        .domain(this.data.list(function (d) {
            return d.inspection;
        })
            .rangeRound([this.height, 0]));
    this.z = d3Scale.scaleOrdinal()
        .range(['#1f77b4', '#2ca02c', '#ff7f0e', '#0038FF']);
}`

0 个答案:

没有答案