带有Angular2的dc.js图表
有任何人使用dc.js与Angular2应用程序.任何帮助或指示将不胜感激.
我能够在正常的html / java脚本上运行我的应用程序.现在我需要在Angular 2应用程序中实现相同的功能. 解决方法
编辑:几个星期后,我有了更好的理解,可能会给出一些更好的指示,所以在这里:
生成角度项目后,安装dc,其类型文件以及所有需要的依赖项,如下所示: npm i --save dc @types/dc crossfilter2 d3 @types/d3 请注意,不需要@ types / crossfilter,因为crossfilter开始直接在其包中提供自己的typefile. 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样式表,如旧答案中所写或任何你想要的地方. 老答案: 我刚刚在组件中绘制了第一个模拟示例,方法是安装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的新手…… (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |