jsonに基づいて複数のキャンバス領域を動的に生成

Question

私はangular2とhtml5キャンバスを使用しています。提供された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; 
} 

と私のdivを生成する方法では、JSONの両方のキャンバスに応じて私の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" 
      } 
     ] 
    } 
    ]; 

ですいくつかの形を持っている必要がありますが、私の場合、2番目のキャンバスは空になります

Answer 1

を、いったい誰が、それぞれへのアクセスを取得する代わりに@ViewChildの@ViewChildrenを使用してみてくださいと

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

を使用して、各キャンバスを反復処理しますキャンバス領域が動的に作成されます。

Answer 2

サーバーからjsonを取得し、JSON.parseで解析します。

キャンバスチャートを描画する場合。

は、JavaScript jQueryのための作図このライブラリを使用することができます - それはあなたがJSONデータを経由してグラフをプロットするのに役立ちますですhttp://www.flotcharts.org/

。 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）は素子の一方のみ 参照を扱うことができるということです。

私が知っている限り、 個の固有識別子をdinamically生成する方法はありません。

いくつかの異なるキャンバス要素を更新するには、別の手段で の参照を取得する必要があります。そのうちの一つは、直接 を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