Angular2 +的dc.js图表

本文介绍了Angular2 +的dc.js图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

任何人都可以将dc.js与Angular2 +应用程序一起使用.任何帮助或指示，将不胜感激.

Has any one used dc.js with Angular2+ application. Any help or pointers will be appreciated.

我能够使我的应用程序在普通的html/java-script上运行.现在，我需要在Angular 2+应用程序中实现相同的功能.

I am able to make my application running on normal html/java-script. Now I need to implement the same in Angular 2+ application.

推荐答案

编辑:几周后，我有了一个更好的理解，并且可能会给出一些更好的说明，所以这里是这样:

Edit: A couple of weeks later I have a much better understanding and can maybe give some better instructions, so here It goes:

生成角度项目后，安装 dc ，其类型文件以及所有所需的依赖项，如下所示:

After generating the angular project, install dc, its typefiles, and all needed dependencies like this:

npm i --save dc @types/dc crossfilter2 d3 @types/d3

请注意，不需要 @ types/crossfilter ，因为crossfilter开始直接在其包内提供其自己的typefile.之后，您可以通过将 dc ， crossfilter 和 d3 导入组件中并使用它们来导入它们，如下所示:

Note that @types/crossfilter is not needed since crossfilter started to supply their own typefile directly inside their package.After that you can import dc, crossfilter, and d3 by importing them in the component and use them like this:

component.html :

<div #nameOfDiv></div>

component.ts

import * as d3 from 'd3';
import * as dc from 'dc';
import * as crossfilter from 'crossfilter2';
import {Dimension} from 'crossfilter2';

export class Graph {
    @ViewChild('nameOfDiv') chartDiv: ElementRef;
    private ndx: Dimension<T> = crossfilter<T>([{...}, {...}]);

    [...]

    paint() {
        let chart = dc.scatterPlot(this.chartDiv.nativeElement);
        chart.render();
    }
}

最后，不要忘了将dcjs css样式表包括在旧答案中所写的index.html中，或者随便包含什么位置.

In the end do not forget to include the dcjs css stylesheet, either in the index.html as written in the old answer or wherever you'd like.

旧答案:我目前处于同一点，在纯html和js中使用dc.js，d3.js和crossfilter2的经验有限.现在我想在Angular 5中使用dcjs.

Old answer:I'm currently at the same point, have some limited experience with dc.js, d3.js, and crossfilter2 in plain html and js. Now I want to use dcjs in Angular 5.

我通过为dc，d3和crossfilter安装@types文件并将实际库包含在index.html标头中，来绘制组件中的第一个模拟示例.

I just painted the first mock example in a component by installing the @types files for dc, d3, and crossfilter and including the actual libraries in the index.html header.

index.html

<head>
[...]
  <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.5/crossfilter.js" rel="script"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.css" />
</head>

ng安装

ng install --save @types/dc
ng install --save @types/d3
ng install --save @types/crossfilter

component.ts

import * as dc from 'dc';
import * as CrossFilter from 'crossfilter';

interface Data {
date: string;
quantity: number;
[...]
}

export class GraphComponent {
  private chart: dc.PieChart;
  private ndx: CrossFilter.CrossFilter<Data> = crossfilter<Data>([{ date: '2011-11-14T16:17:54Z', quantity: 2, total: 190, tip: 100, type: 'tab' }, {...}])

  paintChart(): void {
    this.chart = dc.pieChart('#id__html_div');
    let dim = this.data.dimension((d) => d.date);
    let group = dim.group().reduceCount();
    this.chart.width(200).height(200).dimension(dim).group(group);
    dc.renderAll();
  }
}

希望这会有所帮助.所有这一切都是我最近几个小时所做的，但这并不意味着这是预期的方法或最佳方法.我也是Angular和dcjs的新手..

Hope this helps a little. All of this is just what I did in the last few hours, this does not mean this is the intended way or the best way. I'm new to Angular and dcjs as well..

这篇关于Angular2 +的dc.js图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！