我是 AngularJs 的菜鸟，以前从未使用过图表 JS，但由于没有显示图表，所以遇到了这个问题。我会很感激一些帮助。谢谢!
<h1 class="text-center">Histogram</h1>
<canvas id="myChart" width="300" height="300"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<a ng-click = "vm.edit">Show</a>
angular
.module('histogram-test')
.controller("histoCnt", function ($state, $scope, $rootScope) {
console.log("Contrller working");
var vm = this;
vm.edit = edit;
$scope.chart = angular.element(document.getElementById("myChart"));
function edit() {
var myChart = new Chart($scope.chart, {
type: 'bar',
data: {
labels: ["M", "T", "W", "R", "F", "S", "S"],
datasets: [{
label: 'apples',
data: [12, 19, 3, 17, 28, 24, 7]
}, {
label: 'oranges',
data: [30, 29, 5, 5, 20, 3, 10]
}]
}
});
};
});
最佳答案
您可以使用 Angular 图表库。确保注入(inject) 'chart.js'
angular.module('myApp', ['chart.js'])
演示
(function(angular) {
'use strict';
angular.module('myApp', ['chart.js'])
.controller('myController', [function() {
var ctrl = this;
ctrl.socialChart = {
options: {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
},
type: 'bar',
labels: ["M", "T", "W", "R", "F", "S", "S"],
series: ['apples', 'oranges'],
colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
data: [
[12, 19, 3, 17, 28, 24, 7],
[30, 29, 5, 5, 20, 3, 10]
]
}
}]);
})(window.angular);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi Slot Transclude</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script> <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController as ctrl">
<canvas id="outreach" class="chart chart-bar"
chart-labels="ctrl.socialChart.labels"
chart-data="ctrl.socialChart.data"
chart-series="ctrl.socialChart.series"
chart-colors="ctrl.socialChart.colors"
chart-options="ctrl.socialChart.options"></canvas>
</body>
</html>关于javascript - Charts Js 和 Angular JS 不工作，不显示图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44727912/