jay*_*ani 7 crossfilter dc.js angular
有没有人使用dc.js与Angular2 +应用程序.任何帮助或指示将不胜感激.
我能够在正常的html/java脚本上运行我的应用程序.现在我需要在Angular 2+应用程序中实现相同的功能.
编辑:几个星期后,我有了更好的理解,可能会给出一些更好的指示,所以在这里:
生成角度项目后,安装dc,其类型文件以及所有需要的依赖项,如下所示:
npm i --save dc @types/dc crossfilter2 d3 @types/d3
请注意,不需要@ types/crossfilter,因为crossfilter开始直接在其包中提供自己的typefile.之后,您可以通过在组件中导入它们来导入dc,crossfilter和d3,并像这样使用它们:
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();
}
}
最后不要忘记在index.html中包含dcjs css样式表,如旧答案中所写或任何你想要的地方.
旧答案:我目前处于同一点,对普通的html和js中的dc.js,d3.js和crossfilter2有一些经验.现在我想在Angular 5中使用dcjs.
我刚刚在组件中绘制了第一个模拟示例,方法是安装dc,d3和crossfilter的@types文件,并在index.html标头中包含实际的库.
的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的新手......
| 归档时间： |
|
| 查看次数： |
1862 次 |
| 最近记录： |