0
ich ein JSON-Daten in diesem Format habe zu integrieren:Ich brauche das Balkendiagramm in meinen Code
angular.module('app', []).controller('MainController', ['$scope', function($scope) {
$scope.cities = [{
name: "city A",
elements: [{
id: 'c01',
name: 'name1',
price: 15,
qte: 10
}, {
id: 'c02',
name: 'name2',
price: 18,
qte: 11
}, {
id: 'c03',
name: 'name3',
price: 11,
qte: 14
}],
subsities: [{
name: "sub A1",
elements: [{
id: 'sub01',
name: 'nameSub1',
price: 1,
qte: 14
}, {
id: 'sub02',
name: 'nameSub2',
price: 8,
qte: 13
}, {
id: 'sub03',
name: 'nameSub3',
price: 1,
qte: 14
}]
}, {
name: "sub A2",
elements: [{
id: 'ssub01',
name: 'nameSsub1',
price: 1,
qte: 7
}, {
id: 'ssub02',
name: 'nameSsub2',
price: 8,
qte: 1
}, {
id: 'ssub03',
name: 'nameSsub3',
price: 4,
qte: 19
}]
}, {
name: "sub A3",
elements: [{
id: 'sssub01',
name: 'nameSssub1',
price: 1,
qte: 11
}, {
id: 'sssub02',
name: 'nameSssub2',
price: 2,
qte: 15
}, {
id: 'sssub03',
name: 'nameSssub3',
price: 1,
qte: 15
}]
}]
}, {
name: "city B",
elements: [{
id: 'cc01',
name: 'name11',
price: 10,
qte: 11
}, {
id: 'cc02',
name: 'name22',
price: 14,
qte: 19
}, {
id: 'cc03',
name: 'name33',
price: 11,
qte: 18
}]
}, {
name: "city C",
elements: [{
id: 'ccc01',
name: 'name111',
price: 19,
qte: 12
}, {
id: 'ccc02',
name: 'name222',
price: 18,
qte: 17
}, {
id: 'ccc03',
name: 'name333',
price: 10,
qte: 5
}]
}];
$scope.extractSubsities = function(itemSelected) {
if (itemSelected && itemSelected.elements) {
$scope.data = itemSelected.elements;
}
}
});
ich sie in einen Tisch.
Die HTML:
<body ng-controller="MainCtrl">
<select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
</select>
<select ng-show="selectedCity.subsities" ng-model="selectedSubCity" ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
</select>
<table>
<tr ng-repeat="item3 in data track by item3.id">
<!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
<td>{{ item3.qte}}</td>
</tr>
</table>
</body>
Bis jetzt ist alles in Ordnung ich die Werte der Stadt oder Subcity in eine Tabelle ausgewählt gestellt und ich möchte, dass sie in einem Diagramm setzen für Daten besser lesbar sein. Diese Bibliothek bietet eckige Anweisungen für Chart.js jtblin.github.io/angular-chart.js/#bar-chart Sie haben Codebeispiele und alles. Was ich brauche ist, das Balkendiagramm in meinen Code zu integrieren. zu sehen, wie ich es tun:
ich die Grafik-Bibliothek herunterladen und dies ist meine Struktur meiner Anwendung:
|--css
|--main.css
|--js
|--chart
|--augular-chart.css
|--augular-chart.js () I think only these two files are necessary.
|--controllers
|--MainCtrl.js
|--index.html
index.html wird wie:
<body ng-controller="MainCtrl">
<select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
</select>
<select ng-show="selectedCity.subsities" ng-model="selectedSubCity" ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
</select>
<table>
<tr ng-repeat="item3 in data track by item3.id">
<!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
<td>{{ item3.qte}}</td>
</tr>
</table>
<div ng-controller="MainCtrl">
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels"> chart-series="series"
</canvas>
</div>
</body>
und json wird wie:
angular.module("myApp",["chart.js"]).controller("BarCtrl", function ($scope) {
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
});
angular.module("myApp",["chart.js"]).controller('MainController', ['$scope', function($scope) {
$scope.cities = [{
name: "city A",
elements: [{
id: 'c01',
name: 'name1',
price: 15,
qte: 10
}, {
id: 'c02',
name: 'name2',
price: 18,
qte: 11
}, {
id: 'c03',
name: 'name3',
price: 11,
qte: 14
}],
subsities: [{
name: "sub A1",
elements: [{
id: 'sub01',
name: 'nameSub1',
price: 1,
qte: 14
}, {
id: 'sub02',
name: 'nameSub2',
price: 8,
qte: 13
}, {
id: 'sub03',
name: 'nameSub3',
price: 1,
qte: 14
}]
}, {
name: "sub A2",
elements: [{
id: 'ssub01',
name: 'nameSsub1',
price: 1,
qte: 7
}, {
id: 'ssub02',
name: 'nameSsub2',
price: 8,
qte: 1
}, {
id: 'ssub03',
name: 'nameSsub3',
price: 4,
qte: 19
}]
}, {
name: "sub A3",
elements: [{
id: 'sssub01',
name: 'nameSssub1',
price: 1,
qte: 11
}, {
id: 'sssub02',
name: 'nameSssub2',
price: 2,
qte: 15
}, {
id: 'sssub03',
name: 'nameSssub3',
price: 1,
qte: 15
}]
}]
}, {
name: "city B",
elements: [{
id: 'cc01',
name: 'name11',
price: 10,
qte: 11
}, {
id: 'cc02',
name: 'name22',
price: 14,
qte: 19
}, {
id: 'cc03',
name: 'name33',
price: 11,
qte: 18
}]
}, {
name: "city C",
elements: [{
id: 'ccc01',
name: 'name111',
price: 19,
qte: 12
}, {
id: 'ccc02',
name: 'name222',
price: 18,
qte: 17
}, {
id: 'ccc03',
name: 'name333',
price: 10,
qte: 5
}]
}];
$scope.extractSubsities = function(itemSelected) {
if (itemSelected && itemSelected.elements) {
$scope.data = itemSelected.elements;
}
}
});
Aber das alles funktioniert nicht mit mir Ich benutze das Netzwerk-Tool des Browsers es zeigen mir die Foll wegen Fehler:
-angular-chart.js:13 Uncaught ReferenceError: Chart is not defined
-MainCtrl.js:2 Uncaught ReferenceError: controller is not defined
-Uncaught Error: [$injector:modulerr]
können Sie eine Plunker erstellen – Sajeetharan
Ihre vollständigen Code Ihrer html veröffentlichen – Sajeetharan
@Sajeetharan nur Skriptpfad, die ich auf meinem HTML-Code nicht setzen – Abderrahim