json을 기반으로 여러 캔버스 영역을 동적으로 생성합니다.

Question

angular2 및 html5 캔버스를 사용하고 있습니다. 제공된 JSON을 기반으로 내부에 캔버스 영역이있는 여러 div를 만들고 싶습니다.

이 내 JSON

masterPages = [{ 
     areas: [ 
      { 
       type: "FlowArea", 
       width: "183.0", 
       x: "12.0", 
       y: "40.0", 
       id: "FAR.1", 
       height: "237.0" 
      }, 
      { 
       type: "StaticArea", 
       width: "210.0", 
       x: "0.0", 
       y: "7.0", 
       id: "SAR.2", 
       height: "25.0" 
      }, 
      { 
       type: "StaticArea", 
       width: "210.0", 
       x: "0.0", 
       y: "282.0", 
       id: "SAR.1", 
       height: "15.0" 
      }, 
      { 
       type: "StaticArea", 
       width: "2.0", 
       x: "6.0", 
       y: "26.0", 
       id: "SAR.3", 
       height: "256.0" 
      } 
     ] 
    }, 
    { 
     areas: [ 
      { 
       type: "FlowArea", 
       width: "183.0", 
       x: "12.0", 
       y: "13.25", 
       id: "FAR.1", 
       height: "265.0" 
      }, 
      { 
       type: "StaticArea", 
       width: "210.0", 
       x: "0.0", 
       y: "282.0", 
       id: "SAR.1", 
       height: "15.0" 
      } 
     ] 
    } 
    ]; 

는 JSON 모두 캔버스에 따라되는 캔버스 영역 내 div의 (HTML 코드)

<div class="masterpage" *ngFor="let x of masterPages" draggable [dragScope]="'masterpage'" [dragData]="x"> 
    <canvas #myCanvas width="105" height="149" style="background:lightgray;"></canvas> 
</div> 

.TS 코드 아래

ngAfterViewInit() { 
    let canvas = this.myCanvas.nativeElement; 
    this.context = canvas.getContext("2d"); 
    this.tick(this.masterPages); 
} 

tick(masterPages) { 
    var ctx = this.context; 
    ctx.clearRect(0, 0, 150, 150); 
    for (let j = 0; j < this.masterPages[this.count].areas.length; j++) { 
     ctx.fillStyle = this.masterPages[this.count].areas[j].type; 
     ctx.fillRect(masterPages[this.count].areas[j].x/2, masterPages[this.count].areas[j].y/2, masterPages[this.count].areas[j].width/2, masterPages[this.count].areas[j].height/2); 
    } 
    this.count = this.count + 1; 
} 

을 생성하는 방법이다 몇 가지 모양이 있어야하지만 제 경우에는 두 번째 캔버스가 비어 있습니다.

Answer 1

대신 @ViewChild의 @ViewChildren를 사용하여 시도하고 각각에 대한 액세스를 얻을 것이다 사람 그래서

let canvas = this.myCanvas.toArray()[i].nativeElement; 

사용하여 각 캔버스를 반복 캔버스 영역이 동적으로 생성되었습니다.

Answer 2

서버에서 json을 가져 와서 JSON.parse로 구문 분석하십시오.

캔버스 차트 그리기. http://www.flotcharts.org/

그것은 당신이 JSON 데이터를 통해 그래프를 그릴 도움이 될 것입니다 -

당신은 jQuery를위한 음모를 꾸미고에서 자바 스크립트이 라이브러리를 사용 할 수 있습니다. AJAX 업데이트

-http://www.flotcharts.org/flot/examples/ajax/index.html 실시간 업데이트 - http://www.flotcharts.org/flot/examples/realtime/index.html 샘플 정적 플롯 - http://www.flotcharts.org/flot/examples/basic-usage/index.htm

var d = []; 
for (var i = 0; i < 14; i += 0.5) { 
    d .push([i, Math.sin(i)]); 
} 
var do = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
// A null signifies separate line segments 

var dd = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; 

$.plot("#placeholder", [ d, do, dd]); 

Answer 3

주요 문제는 식별자 (#myCanvas)의 요소 하나만 참조를 처리 할 수 ​​있다는 것이다.

불행히도, 알고있는 한, 개의 고유 식별자를 생성하는 방법은 없습니다.

여러 다른 캔버스 요소를 업데이트하려면 다른 방법을 통해 참조를 가져와야합니다. 그 중 하나는 직접 를 DOM을 조작하는 것입니다하지만 같이하지 않는 것이 좋습니다 : (하여 elementRef 통해) querySelector을 사용하는 것입니다

let canvas = document.getElementById('canvas' + i); 

또 다른 예 :

this.elementRef.nativeElement.querySelector('.myCanvasClass'); 

봐와 ViewChildren 설명서. 그것은 당신이 뭘 하려는지 에 도움이 되거 수 있습니다 https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html