我是Chart JS的新手,我目前在Angular JS 1.5.3版和Chart JS中使用它我使用的是2.1.4版本,这是我的代码
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'Player Count',
data: count,
backgroundColor: "rgba(153,255,51,0.6)"
}]
},
options: {
tooltips: {titleFontSize:29, bodyFontSize:29},
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Date',
fontColor: '#000000'
}
}],
yAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Player Count',
fontColor: '#000000'
}
}]
}
}
});
我看到我的图表在Chrome中显示,但在Firefox中我收到此错误
Error: Chart is not defined
我不确定是什么原因,任何反馈都会有所帮助
答案 0 :(得分:1)
您必须在开头提供chart.js
没有/
的路径。
<script src="libs/Chart.js/2.1.4/Chart.min.js"></script>
答案 1 :(得分:1)
这是因为,在创建图表时,ChartJS库没有被加载。
你应该在窗口onload事件上初始化你的图表,就像这样......
var app = angular.module('app', []);
app.controller("myCtrl", function($scope) {
$scope.load = function() {
var myChart = new Chart(canvas, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Player Count',
data: [1, 2, 3],
backgroundColor: "rgba(153,255,51,0.6)"
}]
},
options: {
tooltips: {
titleFontSize: 29,
bodyFontSize: 29
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Date',
fontColor: '#000000'
}
}],
yAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Player Count',
fontColor: '#000000'
}
}]
}
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<canvas id="canvas" ng-init="load()"></canvas>
</div>