chart.js不顯示在angular2（rc1）

我有一個chart.js和angular2的問題。當我嘗試將圖表綁定到畫布（在角模板內）時，不顯示任何內容。外角的一切工作正常。我的統計組件包含在路由器（router-outlet）中。chart.js不顯示在angular2（rc1）

組件：

@Component({ 
    selector: 'statistic', 
    templateUrl: 'views/statistic.component.html' 
}) 
class ChartComponent implements AfterViewInit { 
    @ViewChild('canvas') canvasElement; 

    ngAfterViewInit() { 
     var ctx = document.getElementById('canvas'); 
     //var ctx = this.canvasElement.nativeElement; 
     var myChart = new Chart(ctx, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3] 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero: true 
         } 
        }] 
       } 
      } 
     }); 

    } 
}

模板：

<h2>Statistic</h2> 
<canvas #canvas id="canvas"></canvas>

當我設置超時時間，並且參考了全球HTML畫布（不是一個模板內），則一切正常。

我發現了一個類似的帖子： chart does not display in angular2 component

但這didnt幫助。我不使用systemjs作爲加載程序，我使用browserify。希望有人能幫助。

// UPDATE

//這個作品 //追加新元素

class ChartComponent implements AfterViewInit { 
    @ViewChild('container') containerElement; 

    ngAfterViewInit() { 
     var canvas = document.createElement('canvas'); 
     this.containerElement.nativeElement.appendChild(canvas); 

     var myChart = new Chart(canvas, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3] 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero: true 
         } 
        }] 
       } 
      } 
     }); 
    } 
}

//這不起作用 - 爲什麼？ //使用VIEWCHILD直

class ChartComponent implements AfterViewInit { 
    @ViewChild('canvas') canvas; 

    ngAfterViewInit() { 
     var myChart = new Chart(this.canvas.nativeElement, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
       datasets: [{ 
        label: '# of Votes', 
        data: [12, 19, 3, 5, 2, 3] 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero: true 
         } 
        }] 
       } 
      } 
     }); 
    } 
}

來源

2016-05-23 wot-stefan

你有沒有考慮尋找到一個現有的適應與Angular2 ChartJs。例如，您可能可以使用的 ng2-charts is a great alternative可以更輕鬆地將其納入您的angular2應用程序。

來源

2016-05-23 14:36:47

嗯，我試圖NG2，圖表和我有同樣的問題在那裏。也許是因爲n2圖表使用chart.js。當我嘗試將chartjs直接綁定到ViewChild畫布時，我得到了描述的結果。但是，當我新創建一個新的畫布元素（在JavaScript中）並將其附加到視圖一切正常。 –

嘗試更新您的模板並將您的canvas-element包裝在div中。不知道它的原因，但當canvas-element位於模板html的根目錄時，問題似乎出現。

更新的模板：

<h2>Statistic</h2> 
<div> 
    <canvas #canvas id="canvas"></canvas> 
</div>

來源

2016-10-11 15:20:29 Qatsi

chart.js不顯示在angular2（rc1）

回答

相關問題