Javascript 将所选城市的值放入图表中_Javascript_Angularjs_Json_Charts_Google Visualization

Javascript 将所选城市的值放入图表中

javascript angularjs json charts google-visualization

Javascript 将所选城市的值放入图表中,javascript,angularjs,json,charts,google-visualization,Javascript,Angularjs,Json,Charts,Google Visualization,我有一个json数据，格式如下： angular.module('app', []).controller('MainController', ['$scope', function($scope) { $scope.cities = [{ name: "city A", elements: [{ id: 'c01', name: 'name1', price: 15, q

我有一个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;
        }
      }
    });

我把它们放在一个表中，我把选择的城市或次城市的值放在一个表中，我想把它们也放在一个图表中，因为数据会更可读

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>


{{item3.id}
{{item3.name}
{{item3.price}}
{{item3.qte}

用户可以选择城市或次城市，然后可以从表格或图表中读取数据，如下图所示：

请帮帮我，我做不到。

你是在问如何创建图表吗？看看或其他类似的东西libraries@jessegavin是的，如何根据所选城市的值创建图表，例如“city a”@jessegavin我看到你的链接很有趣，但我需要将其集成到我的代码中。请提供任何帮助。该库为chart.js提供角度指示。他们有代码示例和所有内容。