大家好，我正在使用 AngularJS。我需要根据与所选选项相关的矩阵值获取图表。
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>
这是我的脚本 json :
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;
}
}
});
我在选择城市或者子城市的时候需要展示一个graph(图表)。我需要显示价格和 qte 的图表，所以我需要为每个城市或子城市显示两列。例如，当我在 DropDown 1 中选择城市 A 并在 DropDown 2 中选择子 A1 以查看如下图表时:
最佳答案
你的问题需要一些澄清，但无论如何，我会尝试通过列出要记住的三个要点来回答它:
- 您需要计算每次模型更改时的最大值，
ngChange。 - 使用
ngStyle渲染条形图。 - CSS 可以很好地处理这种图表。
我制作了一个小例子:
var app = angular.module('app', []);
app.controller('ChartController', function () {
var max = 0;
var cities = [
{
name : 'Berlin',
left : 1000,
right : 5000,
display: true
},
{
name : 'Lisbon',
left : 1000,
right : 500,
display: true
},
{
name : 'London',
left : 2000,
right : 6000,
display: true
},
{
name : 'Madrid',
left : 4000,
right : 200,
display: true
}
];
this.cities = cities;
this.percent = function (value) {
return 100 * value / max + '%';
};
this.max = function () {
max = cities.reduce(function (max, city) {
return city.display ? Math.max(max, city.left, city.right) : max;
}, -Infinity);
};
this.max();
});html {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.l-display {
padding: 5px;
}
.l-display label + label {
margin-left: 10px;
}
.l-chart {
padding: 20px;
}
.l-chart ul {
padding: 0;
margin: 0;
list-style: none;
}
.l-chart ul:after {
content: "";
display: block;
clear: both;
}
.l-chart li {
padding: 0;
margin: 0;
width: 60px;
float: left;
text-align: center;
}
.l-chart li + li {
margin-left: 10px;
}
.l-chart-bars {
position: relative;
height: 200px;
}
.l-chart-bars div {
position: absolute;
width: 50%;
bottom: 0;
left: 0;
background-color: #f1c40f;
}
.l-chart-bars div + div {
left: 50%;
background-color: #e74c3c;
}
.l-chart-label {
padding: 5px 0;
text-align: center;
}<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div ng-app="app" ng-controller="ChartController as chart">
<div class="l-display">
<label ng-repeat="city in chart.cities">
<input type="checkbox" ng-model="city.display" ng-change="chart.max()" />
{{ city.name }}
</label>
</div>
<div class="l-chart">
<ul>
<li ng-repeat="city in chart.cities | filter:{display:true}">
<div class="l-chart-bars">
<div ng-style="{height: chart.percent(city.left)}"></div>
<div ng-style="{height: chart.percent(city.right)}"></div>
</div>
<div class="l-chart-label">{{ city.name }}</div>
</li>
</ul>
</div>
</div>关于javascript - 如何从矩阵中获取图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37056480/