我需要将条形图集成到我的代码中

时间:2022-04-21 22:47:12

I have a json data in this format:

我有这种格式的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;
        }
      }
    });

I put them into a table.

我把它们放在一张桌子里。

The 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>

Till now all is right I put the values of city or subcity selected into a table and I want to put them in a chart too for data will be more readable. This library provides angular directives for Chart.js jtblin.github.io/angular-chart.js/#bar-chart They have code examples and everything. What I need is to integrate the bar chart into my code. take a look at how I do it :

直到现在一切正确我将选择的城市或子城市的值放入表格中,我想将它们放在图表中,以便数据更具可读性。这个库为Chart.js提供了角度指令jtblin.github.io/angular-chart.js/#bar-chart它们有代码示例和所有内容。我需要的是将条形图集成到我的代码中。看看我是怎么做到的:

I download the chart library and this is my structure of my application:

我下载了图表库,这是我的应用程序结构:

|--css
   |--main.css
|--js
    |--chart
         |--augular-chart.css
         |--augular-chart.js   () I think only these two files are necessary.
    |--controllers
             |--MainCtrl.js
|--index.html

index.html becomes like :

index.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>
    <div ng-controller="MainCtrl">
     <canvas id="bar" class="chart chart-bar"
      chart-data="data" chart-labels="labels"> chart-series="series"
     </canvas>
    </div>

</body>

and json becomes like :

和json变得像:

angular.module("myApp",["chart.js"]).controller("BarCtrl", function ($scope) {
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
});

angular.module("myApp",["chart.js"]).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;
            }
          }
        });

But all this don't work with me I use the network tool of the browser it show me the following errors:

但所有这些都不适合我使用浏览器的网络工具,它向我显示以下错误:

-angular-chart.js:13 Uncaught ReferenceError: Chart is not defined
-MainCtrl.js:2 Uncaught ReferenceError: controller is not defined
-Uncaught Error: [$injector:modulerr] 

1 个解决方案

#1


0  

You defined ng-controller="MainCtrl" twice in your index.html?! Second, in your index.html you use MainCtrl while in the controller you have MainController.

你在index.html中定义了两次ng-controller =“MainCtrl”?!其次,在你的index.html中使用MainCtrl,而在控制器中你有MainController。

 <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>
    <div>
     <canvas id="bar" class="chart chart-bar"
      chart-data="data" chart-labels="labels"> chart-series="series"
     </canvas>
    </div>

</body>

#1


0  

You defined ng-controller="MainCtrl" twice in your index.html?! Second, in your index.html you use MainCtrl while in the controller you have MainController.

你在index.html中定义了两次ng-controller =“MainCtrl”?!其次,在你的index.html中使用MainCtrl,而在控制器中你有MainController。

 <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>
    <div>
     <canvas id="bar" class="chart chart-bar"
      chart-data="data" chart-labels="labels"> chart-series="series"
     </canvas>
    </div>

</body>