Question

我试图将一个饼图放在角度组件中。我在一个单独的html文件中构建了这个饼图。但是知道我想在单页应用程序中获得这个HTML。

<html>
<head>
    <title></title>
    <!-- Set the base href -->
    <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>
</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 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>

所以这是我的组件。如何使用组件渲染图表？

我怎样才能将javascript代码放入TypeScript？ componen.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组件中？

1 个答案: