각도 요소에 dc.js 및 crossfilter.js HTML 페이지를 삽입하는 방법은 무엇입니까?

각도의 구성 요소에 파이 차트를 넣으려고합니다. 이 원형 차트는 별도의 HTML 파일로 작성했습니다. 하지만 싱글 페이지 응용 프로그램에서이 html을 얻으려고합니다.각도 요소에 dc.js 및 crossfilter.js 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>

그래서 여기에 내 component.ts가 있습니다. 구성 요소로 차트를 렌더링하려면 어떻게해야합니까?

그리고 어떻게 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>

사람이 어떻게 그것을 실현하는 생각이 있습니까?

출처

2017-12-31 BVB1392

Angular의 모범 사례와 올바르게 작동하려면 약간의 작업이 필요합니다.

이러한 라이브러리를 TypeScript와 함께 사용하려면 d.ts (입력 된) 파일을 찾아야합니다. 내가 여기를 발견했습니다 :이처럼 보일 것이다

import * as yourPreferedName from 'your-library';

: https://microsoft.github.io/TypeSearch/

는 그런 다음을 통해 GroupComponent를로 가져올 필요가

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 
    } 

}

의견이 있으시면 언제든지 문의 해 주시기 바랍니다.

출처

2017-12-31 12:27:10 Iaroslav

당신은 탱크를 많이 가지고 있어요! – BVB1392

각도 요소에 dc.js 및 crossfilter.js HTML 페이지를 삽입하는 방법은 무엇입니까?

답변

관련 문제