我想为所选的每个城市或子类别更改图表 [英] I want to change the chart for each city or subcity selected
本文介绍了我想为所选的每个城市或子类别更改图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用AngularJS开发了一个简单的应用程序，并且希望基于此网站添加一个简单的图表
我想从属性中抽取 $ c>元素的城市
我想为所选的每个城市或子类别更改图表。例如，如果我选择子类是 sub A1 ，我需要得到一个图表：
请帮助我！
UPDATE ：
我试图只使用一个数据源文件
[{
type：line，
plotarea：{
adjust-layout：true
}，
scale-x {
label：{
text：échelleessence 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 1，
qte：11
}，{
id：sssub02，
name：nameSssub2，
price：2，
qte：15
}，{
id：sssub03，
name：nameSssub3，
price：1，
qte：15
}]
}]
}，{
name：城市B，
元素：[{
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，
元素：[{
id：ccc01，
name：name111，
price：19，
qte： 12
}，{
id：ccc02，
name：name222，
price：18，
qte：17
}，{
id：ccc03，
name：name333，
price：10 b $ bqte：5
}]
}];
我在这里呼叫我的资料：
angular.module（'app'，[]）。controller（'MainController'，['$ scope'，'$ http'，function（$ scope，$ http）{
$ http.get（'js / controllers / data.json'）。然后（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 ）{
if（itemSelected&& itemSelected.elements）{
$ scope.data = itemSelected.elements;
}
}
}]）;
index.html ：
< body ng-controller =MainCtrl>
< select ng-model =selectedCityng-change =extractSubsities（selectedCity）ng-options =item as item.name for items in cities track by item.nameng-init =selectedCity = cities [0]; extractSubsities（selectedCity）>
< / select>
< select ng-show =selectedCity.subsitiesng-model =selectedSubCityng-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 =myChartzc-json =myJsonzc-height = 500 zc-width = 600>< / zingchart>
< / body>
但仍然无法加载图表
我有错误：
TypeError：无法读取未定义的属性'type'
UPDATE 2 ：
：
解决方案
好吧，如果我理解你，那么你需要以下的东西：
angular.module（myApp，['zingchart -angularjs']）
.controller（'MainController'，['$ scope'，'$ http'，function（$ scope，$ http）{
$ scope.chartBase = {
type：line，
plotarea：{
adjust-layout：true / *用于自动边距调整。 * /
}，
scale-x：{
label：{
text：上面是类别比例的示例/ *缩放标题与标签对象。 * /
}，
labels：[name1，name2，name3] / *添加标签数组。 * /
}，
series：[{
values：[15，18，11] //这里的城市的价格选择
}，{
values：[10，11，14] //这里选择城市的qte
}]
};
$ scope.chartData = angular.copy（$ scope.chartBase）;
$ b $ http.get（'data.json'）
.then（function（response）{
$ scope.cities = response.data; //保存请求数据
$ scope.selectedCity = $ scope.cities [0]; //选择第一个
$ scope.changeCity（）; //更新图表
}，function（error）{console .log（error）;}）;
$ scope.changeCity = function（）{
if（$ scope.selectedSubCity || $ scope.selectedCity）{//如果选择了某项
$ scope.data =（$ scope.selectedSubCity || $ scope.selectedCity）.elements; //更新元素字段
//初始化要在图表中显示的数组
var labels = [];
var price = {
values：[]
};
var qte = {
values：[]
};
//填充要从所选城市（子城市）显示的数组
angular.forEach（$ scope.data，function（item，index）{
labels。 push（item.name）;
price.values.push（item.price）;
qte.values.push（item.qte）;
}）;
//将所选值放到用于渲染图表的字段中
$ scope.chartData [scale-x]。labels = labels;
$ scope.chartData.series = [price，qte];
}
}
}]）;
我修改了一下你控制器（和html页面）。以下是一个示例 - plunker 。
困难（我可以看到）在你的 data.json 文件。它有一个怪异的结构。它结合了图表参数和数据本身。 （在我的例子中，我从中删除图表参数，并硬编码在控制器内，但没有必要）。
希望它会有帮助。
I developed a simple application with AngularJS and I want to add a simple chart based on this website Js Charts
This is my 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"
}
]
}
]
I call my data here.
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>
the result:
I want to extract from the the attribute name element's city
I want to change the chart for each city or subcity selected. For example if I select the subcity is sub A1 I need to get a chart like :
Please help me !
UPDATE :
I tried to use only one source file of data
[{
"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"
}]
}];
I called my data here :
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>
But still doesn't work it couldn't load the chart
I have as an error :
TypeError: Cannot read property 'type' of undefined
UPDATE 2 :
I set this up in a plunkr: plnkr.
UPDATE 3
Please can you tell me how can I remove this Powered by ZingChart
解决方案
Well, If I understand you right then you need something following:
angular.module("myApp",['zingchart-angularjs'])
.controller('MainController', ['$scope', '$http', function($scope, $http) {
$scope.chartBase = {
"type": "line",
"plotarea": {
"adjust-layout": true /* For automatic margin adjustment. */
},
"scale-x": {
"label": {
"text": "Above is an example of a category scale" /* Add a scale title with a label object. */
},
"labels": ["name1", "name2", "name3"] /* Add your scale labels with a labels array. */
},
"series": [{
"values": [15, 18, 11] //here the prices of city selected
},{
"values": [10, 11, 14] //here the qte of city selected
}]
};
$scope.chartData = angular.copy($scope.chartBase);
$http.get('data.json')
.then(function(response) {
$scope.cities = response.data; // save the request data
$scope.selectedCity = $scope.cities[0]; // select the first one
$scope.changeCity(); // update chart
}, function(error) { console.log(error); });
$scope.changeCity = function() {
if($scope.selectedSubCity || $scope.selectedCity){ // if something has been selected
$scope.data = ($scope.selectedSubCity || $scope.selectedCity).elements; // update elements field
// initialize the array to be displayed in chart
var labels = [];
var price = {
"values": []
};
var qte = {
"values": []
};
// fill the arrays to be displayed from the selected city (sub city)
angular.forEach($scope.data, function(item, index) {
labels.push(item.name);
price.values.push(item.price);
qte.values.push(item.qte);
});
// put selected values to the field that is used to render the chart
$scope.chartData["scale-x"].labels = labels;
$scope.chartData.series = [ price, qte ];
}
}
}]);
I modified a bit you controller (and html page). Here is an example - plunker.
The difficulties (as I can see) were in your data.json file. It has a weird structure. It combines the chart parameters and the data itself. (in my example I removed chart parameters from it and hardcoded them inside the controller. but it's not necessary).
Hope it will help.
这篇关于我想为所选的每个城市或子类别更改图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
