BVB*_*392 5 javascript crossfilter dc.js angular
我正在尝试将饼图放入 Angular 组件中。我已经在一个单独的 HTML 文件中构建了这个饼图，但现在我想把这个 HTML 放到一个单页应用程序中。
<html>
<head>
<title></title>
<base href="/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/dc.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="./css/keen-dashboards.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<!-- code to display -->
<div class="col-xs-2 pie-chart">
<h4>Cold vs Active <small><a id="day">reset</a></small></h4>
<div class="dc-chart" id="chart-ring-tier"></div>
</div>
<script src="js/d3.js"></script>
<script src="js/crossfilter.js"></script>
<script src="js/dc.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src='js/queue.js' type='text/javascript'></script>
<script src="node_modules/keen-dataviz/dist/keen-dataviz.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script type="text/javascript">
System.import('./app/app.module')
.then(null, console.error.bind(console));
// Fetch data from the api
queue()
.defer(d3.json, "http://localhost:3001/api/")
.await(makeGraphs);
function makeGraphs(error, apiData) {
// Parse JSON file, create charts
var dataSet = apiData.todos;
// Set crossfilter data
var ndx = crossfilter(dataSet);
var dirnameDim = ndx.dimension(function (d) { return d.dirName });
var statusDim = ndx.dimension(function (d) { return d.status });
var all = ndx.groupAll();
// Create groups (y-axis values)
var countPerDir = dirnameDim.filterExact("Folder1").group().reduceSum(function(d) { return d.size; });
var countPerTier = statusDim.group().reduceCount();
// Specify charts
var tierChart = dc.pieChart('#chart-ring-tier');
tierChart
.width(150)
.height(150)
//.slicesCap(4)
.innerRadius(20)
.dimension(statusDim)
.label(function (d) {
if (tierChart.hasFilter() && !tierChart.hasFilter(d.key)) {
return d.key + '(0%)';
}
var label = d.key;
if (all.value()) {
label += '(' + Math.floor(d.value / all.value() * 100) + '%)';
}
return label;
})
.group(countPerTier);
// Showtime!
dc.renderAll();
}
</script>
</body>
</html>
所以这是我的component.ts. 我应该怎么做才能用组件渲染图表？
以及如何将 javascript 代码转换为 TypeScript？
组件.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-group',
templateUrl: './group.component.html',
styleUrls: ['./group.component.css']
})
export class GroupComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
组件.html
<div class="col-xs-2 pie-chart">
<h4>Cold vs Active <small><a id="day">reset</a></small></h4>
<div class="dc-chart" id="chart-ring-tier"></div>
</div>
有谁知道如何实现这一点？
小智 3
它需要一些工作才能使其正常工作并符合 Angular 的最佳实践。
要将这些库与 TypeScript 一起使用，您需要找到它们的 d.ts（类型化）文件。我在这里找到了它们： https: //microsoft.github.io/TypeSearch/
然后您需要通过以下方式将它们导入 GroupComponent：
import * as yourPreferedName from 'your-library';
它应该看起来像这样：
import * as d3 from 'd3';
import * as crossfilter from 'crossfilter2';
import { DSVRowString } from 'd3';
import * as dc from 'dc';
当您导入所有 d.ts 时。库到您需要将所有 js 代码移至其中的组件。下面是 GroupComponent 的简短版本，这只是一个示例，因为我没有将代码移到那里。
export class GroupComponent implements OnInit {
constructor() {
}
ngOnInit() {
queue().defer(d3.json, "http://localhost:3001/api/")
.await(this.makeGraphs);
}
makeGraphs(error, apiData){
// Move all your js code here and correct it to the typescript rules
}
}
如果您有任何疑问，请随时在评论中询问我。
| 归档时间： |
|
| 查看次数： |
1063 次 |
| 最近记录： |