我想更改每个城市或子城市select的图表
我用AngularJS开发了一个简单的应用程序，我想根据这个网站的Js图表添加一个简单的图表
这是我的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" } ] } ] 我在这里打电话给我的数据
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>
结果是 ：
我想从属性name元素的城市中提取
我想更改每个城市或子城市select的图表。 例如，如果我selectsubcity是sub A1我需要得到一个图表：
请帮帮我 ！
更新 ：
我试图只使用一个数据源文件
[{ "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" }] }];
我在这里打电话给我的数据
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>
但仍然无法正常工作，无法加载图表
我有一个错误：
TypeError：无法读取未定义的属性'type'
更新2 ：
我把它放在一个plunkr： plnkr中 。
更新3
请你能告诉我如何删除这个Powered by ZingChart
那么，如果我理解你是正确的，那么你需要以下几点：
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 ]; } } }]);
我修改了一下你的控制器（和html页面）。 这里是一个例子 – 抢劫犯 。
困难（正如我所见）是在你的data.json文件。 它有一个奇怪的结构。 它结合了图表参数和数据本身。 （在我的示例中，我从中删除了图表参数，并将它们硬编码到控制器中，但这不是必需的）。
希望它会有所帮助。
ZingChart希望你在数组中给它赋值，或者如果你想让它在图表中多行显示，可以给它一个数组数组。 您的数据正在正确加载，所以您只需将所需的值压入各自的数组，然后将该数组数组传递给图表。
我将ng-change="extractSubsities(selectedCity)"到您的select框，以便在您更改select时更新图表。
然后添加一个简单的forEach到你的extractSubsities函数来从当前select的数据生成数组，让你相信你正在寻找。
$scope.extractSubsities = function(itemSelected) { if(itemSelected && itemSelected.elements){ $scope.data = itemSelected.elements; $scope.myData = itemSelected.elements console.log(itemSelected.elements) var price = [] var qte = [] itemSelected.elements.forEach(function(v) { price.push(v.price) qte.push(v.qte) }) $scope.myData = [price, qte] }
}
zingchart指令应该如下所示： <zingchart id = "myChart" zc-values = "myData" zc-height = 500 zc-width = 600 ></zingchart> Plunkr： 点击这里
