5

我用 AngularJS 开发了一个简单的应用程序，我想添加一个基于这个网站Js Charts的简单图表

这是我的data.json：

[
    {
        "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"
            }
        ]
    }
]

我在这里调用我的数据。

 angular.module('app', [])
        .controller('MainController', ['$scope', '$http', function($scope, $http) {
            $http.get('js/controllers/data.json').then(function(response) {
                $scope.cities = response.data;
                $scope.selectedCity = $scope.cities[0];
                $scope.data = $scope.selectedCity.elements;
            });

            $scope.myJson = {
                "type": "line",
                "plotarea": {
                    "adjust-layout":true /* For automatic margin adjustment. */
                },
                "scale-x": {
                    "label": { /* Add a scale title with a label object. */
                        "text":"Above is an example of a category scale",
                    },
                /* Add your scale labels with a labels array. */
                    "labels":["name1","name2","name3"]
                },
                "series": [
                    {"values":[15,18,11]},//here the prices of city selected
                    {"values":[10,11,14]}//here the qte of city selected
                ]
            };

            $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" ng-init="selectedCity = cities[0];extractSubsities(selectedCity)">
</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">
  <option style="" value=""></option>
</select>

<table>
  <tr ng-repeat="item3 in data track by item3.id">
    <td>{{ item3.id }}</td>
    <td>{{ item3.name }}</td>
    <td>{{ item3.price }}</td>
  </tr>
</table>

<zingchart id = "myChart" zc-json = "myJson" zc-height = 500 zc-width = 600 ></zingchart>
</body>

结果：_

在此处输入图像描述

我想从属性name元素的城市中提取

我想更改每个选定城市或子城市的图表。例如，如果我选择子城市，sub A1我需要获得如下图表：

在此处输入图像描述

请帮我 ！

更新：

我试图只使用一个数据源文件

[{
        "type": "line",
        "plotarea": {
            "adjust-layout": true
        },
        "scale-x": {
            "label": {
                "text": "échelle essence gazoile"
            },

            "labels": ["sub01", "sub02", "sub02"]
        },
        "series": [{
            "values": [1, 8, 1]
        }, {
            "values": [14, 13, 14]
        }],

        "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"
        }]
      }];

我在这里调用了我的数据：

angular.module('app', []).controller('MainController', ['$scope', '$http', function($scope, $http) {

      $http.get('js/controllers/data.json').then(function(response) { 
      $scope.cities = response.data; 
      $scope.myJson=response.data;
      $scope.selectedCity = $scope.cities[0];
      $scope.data = $scope.selectedCity.elements;
  }, function(error) { console.log(error); });

  $scope.name = 'World';
  $scope.data;

  $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" ng-init="selectedCity = cities[0];extractSubsities(selectedCity)">
  </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">
       <option style="" value=""></option>
       </select>

      <table>
        <tr ng-repeat="item3 in data track by item3.id">
          <td>{{ item3.id }}</td>
          <td>{{ item3.name }}</td>
          <td>{{ item3.price }}</td>
        </tr>
          </table>
    </div>
 <zingchart id = "myChart" zc-json = "myJson" zc-height = 500 zc-width = 600 ></zingchart>
    </body>

但仍然无法正常加载图表

我有一个错误：

TypeError：无法读取未定义的属性“类型”

更新 2：

我在 plunkr 中设置了这个：plnkr。

更新 3

请你能告诉我如何删除这个Powered by ZingChart

在此处输入图像描述

4

2 回答 2

5

好吧，如果我理解正确，那么您需要以下内容：

angular.module("myApp",['zingchart-angularjs'])
   .controller('MainController', ['$scope', '$http', function($scope, $http) {
      $scope.chartBase = {
        "type": "line",
        "plotarea": {
          "adjust-layout": true /* For automatic margin adjustment. */
        },
        "scale-x": {
          "label": { 
            "text": "Above is an example of a category scale" /* Add a scale title with a label object. */
          },
          "labels": ["name1", "name2", "name3"] /* Add your scale labels with a labels array. */
        },
        "series": [{
            "values": [15, 18, 11] //here the prices of city selected
          },{
            "values": [10, 11, 14] //here the qte of city selected
          }]
      };
      $scope.chartData = angular.copy($scope.chartBase);

      $http.get('data.json')
           .then(function(response) {
             $scope.cities = response.data; // save the request data
             $scope.selectedCity = $scope.cities[0]; // select the first one
             $scope.changeCity(); // update chart
            }, function(error) { console.log(error); });

      $scope.changeCity = function() {
        if($scope.selectedSubCity || $scope.selectedCity){ // if something has been selected
            $scope.data = ($scope.selectedSubCity || $scope.selectedCity).elements; // update elements field

            // initialize the array to be displayed in chart
            var labels = [];
            var price = {
              "values": []
            };
            var qte = {
              "values": []
            };

            // fill the arrays to be displayed from the selected city (sub city)
            angular.forEach($scope.data, function(item, index) {
              labels.push(item.name);
              price.values.push(item.price);
              qte.values.push(item.qte);
            });

            // put selected values to the field that is used to render the chart
            $scope.chartData["scale-x"].labels = labels;
            $scope.chartData.series = [ price, qte ];
        }
      }
   }]);

我修改了一点你的控制器（和 html 页面）。这是一个例子 - plunker。

困难（如我所见）在您的data.json文件中。它有一个奇怪的结构。它结合了图表参数和数据本身。（在我的示例中，我从中删除了图表参数并将它们硬编码在控制器内。但这不是必需的）。

希望它会有所帮助。

于 2016-05-17T20:07:03.320 回答
3

ZingChart 希望你在数组中给它值，或者如果你想让它在图表中绘制多条线，则给它一个数组数组。您的数据已正确加载，因此您所要做的就是将所需的值推入它们各自的数组并将该数组数组传递给图表。

我添加ng-change="extractSubsities(selectedCity)"到您的选择框中，以便在您更改选择时更新图表。

然后在您的 extractSubsities 函数中添加一个简单的 forEach 以从当前选择的数据生成数组，这将为您提供我相信您正在寻找的东西。

$scope.extractSubsities = function(itemSelected) {
if(itemSelected && itemSelected.elements){
    $scope.data = itemSelected.elements;
    $scope.myData = itemSelected.elements
    console.log(itemSelected.elements)
    var price = []
    var qte = []
    itemSelected.elements.forEach(function(v) {
      price.push(v.price)
      qte.push(v.qte)
    })
    $scope.myData = [price, qte]
}

}

zingchart 指令应如下所示： <zingchart id = "myChart" zc-values = "myData" zc-height = 500 zc-width = 600 ></zingchart> Plunkr：单击此处

于 2016-05-17T20:11:38.087 回答