如何从矩阵获取图表

本文介绍了如何从矩阵获取图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

大家好，我使用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 ngStyle to 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>

这篇关于如何从矩阵获取图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！