私が読んだドキュメント(通常は役に立たない)を除いて、私は私のページに実装したいいくつかのチャートの例を見つけましたが、うまくいかないようです。私はそれを調整しようとしましたが、負荷がかかるたびに常にページに空白が表示されます。ここで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ファイルが含まれています。
を含める前にChart.jsコードを使用していますか? – Sajeetharan
キャンバスの終了タグが2倍になっています。幅と高さのプロパティがブラウザで解析されていない可能性があります。その結果、空白のページが表示されます。 –
@WouterCoeberghを試してみてください。 –