私は自分のapplication.soにChartを関与させたいと思いました。Angular-chart.jsをインストールしました。 私は理解したようにアプローチは非常に簡単です。しかし、それは次のエラーを与えます。Angular-Charts/Chart.jsが動作していません
インデックス
<script src="node_modules/chart.js/dist/Chart.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"> </script>
app.js
angular.module('EventReplayingApp', ['ngRoute', 'appRoutes','chart.js']);
エラー
ありません誰もがアイデアを持っている？
おかげ
私は仮定している、あなたは、ない角度2/4をAngularJSを使用しています。その場合は、チャートライブラリ参照にCDNリンクを使用する必要があります。現在使用している
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
チャートライブラリのソースは、あなたがangular-chartsとchart.jsが正しいバージョン管理ライブラリの参照を持つべきであることを確認して、同じように使用することができますNode.jsの
ためのものです。
<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>
DEMOℊαα[email protected]
(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: 'StackedBar',
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
data : [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100]
]
}
}]);
})(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>のような相対パスを使用できます。ありがとう@Sajeetharan – MSKP
Resolved.Thanks。私はこのライブラリをダウンロードできません。 – MSKP
よろしくお願いいたします。はい、あなたはそれらをダウンロードしてプロジェクトのルートディレクトリに置くことができます。次に、 'src =" Chart.min.js "'と 'src =" angle-chart.min.js "' –