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

问题描述

大家好,我使用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>

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

09-01 23:31