如何将 dc.js 和 crossfilter.js html 页面放入 Angular 组件中？

Question

我正在尝试将饼图放入 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？

component.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() {}
}

component.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>

有人知道如何实现吗？

Answer 1

它需要一些工作才能使其正常工作并采用 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
    }

}

如果您有任何问题，请随时在评论中问我。

如何将 dc.js 和 crossfilter.js html 页面放入 Angular 组件中？

How to put dc.js and crossfilter.js html page in a Angular component?

javascript

crossfilter

dc.js

angular