2017-12-07 10 views
-2

私が読んだドキュメント(通常は役に立たない)を除いて、私は私のページに実装したいいくつかのチャートの例を見つけましたが、うまくいかないようです。私はそれを調整しようとしましたが、負荷がかかるたびに常にページに空白が表示されます。ここでAngular-Charts JSの使い方は?

コードです:

<div data-ng-controller="LineCtrl as line"> 
<canvas> data-sys-chart-line 
     data-dataset="line.data" 
     width="400" 
     height="240"></canvas> 
</div> 
<script type="text/javascript"> 
    (function() { 
     'use strict'; 

     function LineCtrl () { 
      this.data = { 
       labels: ["January", "February", "March", "April", "May", "June"], 
      datasets: [ 
       { 
        fillColor: "rgba(220,220,220,0.2)", 
        strokeColor: "rgba(220,220,220,1)", 
        pointColor: "rgba(220,220,220,1)", 
        data: [40, 10, 60, 70, 20, 20] 
       }, 
       { 
        fillColor: "rgba(151,187,205,0.2)", 
        strokeColor: "rgba(151,187,205,1)", 
        pointColor: "rgba(151,187,205,1)", 
        data: [30, 70, 40, 90, 60, 70] 
       } 
      ] 
     }; 
    } 
})(); 
</script> 
<!-- Includes Dependencies here: AngularJS & Chart.js --> 
<script src="script/Chart.js"></script> 
<script src="script/angular-chart.min.js"></script> 
<script src="script/tc-angular-chartjs.min.js"></script> 
<script> 

私は私のプロジェクトフォルダに/scriptフォルダの下のそれらの.jsファイルが含まれています。

+0

を含める前にChart.jsコードを使用していますか? – Sajeetharan

+1

キャンバスの終了タグが2倍になっています。幅と高さのプロパティがブラウザで解析されていない可能性があります。その結果、空白のページが表示されます。

+1

@WouterCoeberghを試してみてください。 –

答えて

0

私は前にChart.jsを使用していないが、10秒のために私はあなたがこの

ようにそれを初期化する必要があることを見つけたドキュメントを読むことにより、uは、それが間違っ

あなたがチャートを初期化したことがありませんやっているようだことがありません

var ctx = document.getElementById("here_is_the_canvas_element").getContext('2d'); 
var myChart = new Chart(ctx, { ... }) 

とエラーが何であるかをライブラリ

+0

を描画しようとしたが、それを初期化しようとしたが、動作しませんでした。 –

関連する問題