Question

我在使用角度2和dc.js创建序数条形图时遇到问题我在Javascript中发现了这个示例：https://github.com/dc-js/dc.js/blob/master/web/examples/ordinal-bar.html，但是当我尝试设置属性.xUnits时，我收到错误：

TypeError：_x.rangeBands不是函数在prepareXAxis（dc.js：3256）在drawChart（dc.js：3919） at Object._chart._doRender（dc.js：3898） at Object._chart.render [as _render]（dc.js：1691）在Object.render（dc.js：5586）在StatisticDcComponent.ngAfterViewInit（statistic-dc.component.ts：63） at callProviderLifecycles（core.es5.js：11189） at callElementProvidersLifecycles（core.es5.js：11164） at callLifecycleHooksChildrenFirst（core.es5.js：11148）在checkAndUpdateView（core.es5.js：12253）

这是我的组成部分：

＆＃13;

import { Component, OnInit, AfterViewInit  } from '@angular/core';
import { CsvService } from 'angular2-json2csv';

import * as d3 from 'd3';
import * as crossfilter from 'crossfilter2';
import { DSVRowString } from 'd3';
import * as dc from 'dc';


import { StatisticService } from '../statistic/statistic.service';

@Component({
  selector: 'statisticdc',
  styleUrls: ['./statistic-dc.scss'],
  templateUrl: './statistic-dc.html'
})
export class StatisticDcComponent implements OnInit, AfterViewInit {

  xdomain: any[];
  ydomain: any[];
  csvSample: any;
  experiments: any;

  constructor(private statisticService: StatisticService, private csvservice: CsvService) {

  }

  ngAfterViewInit(): void {
    let that = this;
    this.csvSample = this.csvservice.ConvertToCSV(this.statisticService.getDealers());
    let chart = dc.barChart('#test');
    this.experiments = d3.csvParse(this.csvSample);
    let exper = [];

    this.experiments.forEach(function(x) {
      exper.push(x);
    });

    let ndx = crossfilter(exper);

    let runDimension = ndx.dimension(function(d) { return d['dealer_name']; });
    let speedSumGroup = runDimension.group().reduceSum(function(d) {return d['total_bonus_num']; });

    chart
    .width(768)
    .height(380)
    .xUnits(dc.units.ordinal)
    .x(d3.scaleOrdinal())
    .brushOn(false)
    .xAxisLabel('Fruit')
    .yAxisLabel('Quantity Sold')
    .dimension(runDimension)
    .barPadding(0.1)
    .outerPadding(0.05)
    .group(speedSumGroup);

    chart.render();
  }

  ngOnInit(): void {

  }
}

＆＃13;

也许有人知道如何解决这个问题或者我在哪里可以找到Dc.js和Angular2 +的文档？

使用DC.js和Angular 2创建序数条形图

0 个答案: