如何从矩阵获取图表 [英] How can I get a chart from a matrix
本文介绍了如何从矩阵获取图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，我使用AngularJS。我需要获取图表取决于与所选择的选择相关的矩阵的值。
Hello everybody I am using AngularJS. I need to get a chart depends on the values of the matrix related to the choice selected.
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：
And this is my script 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;
}
}
});
当我选择城市或子集时，我需要显示一个图表。我需要显示图表deponds上的价格和qte，所以我需要显示两个列为每个城市或次级。例如当我在DropDown 1中选择城市A，在DropDown 2中选择子A1时，会看到如下图：
I need to show a graph (chart) when I chose a city or a subcity. I need to show a graph deponds on the price and qte so I need to show two columns for each city or subcity. for example when I chose city A in DropDown 1 and sub A1 in the DropDown 2 to see a graph like :
推荐答案
您的问题需要澄清，但无论如何，我会尝试回答它，列出三个要点：
Your question needs some clarification, but anyway, I'll try to answer it by listing three main points to keep in mind:
- 您需要计算每次模型更改时的最大值，
ngChange
- 使用
ngStyle来呈现栏。
- You'll need to calculate the maximum value on every model change,
ngChange. - Use
ngStyleto render the bars. - CSS can handle pretty well this kind of charts.
我制作了一个例子：
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>
这篇关于如何从矩阵获取图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
