Ich möchte die Karte für jede ausgewählte Stadt oder Unterstadt ändern
Ich habe eine einfache Anwendung mit AngularJS entwickelt und möchte ein einfaches Diagramm basierend auf dieser Website hinzufügen.Js Charts
Das ist mein data.json:
[
{
"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"
}
]
}
]
Ich rufe meine Daten hier an.
angular.module('app', [])
.controller('MainController', ['$scope', '$http', function($scope, $http) {
$http.get('js/controllers/data.json').then(function(response) {
$scope.cities = response.data;
$scope.selectedCity = $scope.cities[0];
$scope.data = $scope.selectedCity.elements;
});
$scope.myJson = {
"type": "line",
"plotarea": {
"adjust-layout":true /* For automatic margin adjustment. */
},
"scale-x": {
"label": { /* Add a scale title with a label object. */
"text":"Above is an example of a category scale",
},
/* Add your scale labels with a labels array. */
"labels":["name1","name2","name3"]
},
"series": [
{"values":[15,18,11]},//here the prices of city selected
{"values":[10,11,14]}//here the qte of city selected
]
};
$scope.extractSubsities = function(itemSelected) {
if (itemSelected && itemSelected.elements) {
$scope.data = itemSelected.elements;
}
}
}]);
index.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" ng-init="selectedCity = cities[0];extractSubsities(selectedCity)">
</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">
<option style="" value=""></option>
</select>
<table>
<tr ng-repeat="item3 in data track by item3.id">
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
</tr>
</table>
<zingchart id = "myChart" zc-json = "myJson" zc-height = 500 zc-width = 600 ></zingchart>
</body>
dasErgebni:
Ich möchte aus dem Attribut @ extrahiername Elements Stadt
Ich möchte die Karte für jede ausgewählte Stadt oder Unterstadt ändern. Wenn ich zum Beispiel die Unterstadt auswähle, istsub A1 Ich brauche ein Diagramm wie:
Bitte hilf mir
AKTUALISIERE :
Ich habe versucht, nur eine Quelldatei von Daten zu verwenden
[{
"type": "line",
"plotarea": {
"adjust-layout": true
},
"scale-x": {
"label": {
"text": "échelle essence gazoile"
},
"labels": ["sub01", "sub02", "sub02"]
},
"series": [{
"values": [1, 8, 1]
}, {
"values": [14, 13, 14]
}],
"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"
}]
}];
Ich habe meine Daten hier genannt:
angular.module('app', []).controller('MainController', ['$scope', '$http', function($scope, $http) {
$http.get('js/controllers/data.json').then(function(response) {
$scope.cities = response.data;
$scope.myJson=response.data;
$scope.selectedCity = $scope.cities[0];
$scope.data = $scope.selectedCity.elements;
}, function(error) { console.log(error); });
$scope.name = 'World';
$scope.data;
$scope.extractSubsities = function(itemSelected) {
if(itemSelected && itemSelected.elements){
$scope.data = itemSelected.elements;
}
}
}]);
index.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" ng-init="selectedCity = cities[0];extractSubsities(selectedCity)">
</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">
<option style="" value=""></option>
</select>
<table>
<tr ng-repeat="item3 in data track by item3.id">
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
</tr>
</table>
</div>
<zingchart id = "myChart" zc-json = "myJson" zc-height = 500 zc-width = 600 ></zingchart>
</body>
Aber es funktioniert immer noch nicht, das Diagramm konnte nicht geladen werden
Ich habe als Fehler:
TypeError: Die Eigenschaft 'type' von undefined @ kann nicht gelesen werd
UPDATE 2 :
Ich habe dies in einem plunkr eingerichtet: plnkr.
UPDATE 3
Bitte kannst du mir sagen, wie ich dieses @ entfernen kaPowered by ZingChart
