在js文件

Question

我的要求是显示条形图。我正在使用angularjs和Zingchart来显示条形图。下面是调用生成条形图的javascript代码。我在下面提到的代码中迭代逻辑（angular.forEach ..）时遇到了问题。

我在angular.forEach中的警告声明显示3次，但在UI上我只能看到显示的一个条形图（即显示最终数据的条形图，前两个条形图未显示）。 我知道我错过了绘制每一个酒吧而不是最后显示的酒吧的东西。我是否需要使用任何push statemetns。请指教。

app.controller('myController',['$rootScope','$scope','$uibModal','myService',function($rootScope,$scope,$uibModal,myService)  {
    $scope.chart = {};
    $scope.chart.options = {
        "isStacked": "true",
         axisFontSize : 10,
        chartArea: {left:0, width: 400,}
    };
    $scope.chart.type = "bar";
    $scope.chart.cssStyle = "height:300px; width:650px;";

    $scope.loadChartData = function(){
        alert("Chart data loading");
        MyService.getChartData($rootScope.myID).then(
            function(response) {
                $scope.myJson=response;
                  angular.forEach($scope.myJson,function(value,key){
                      alert("in foreach"); //displaying 3 times
                      sub =  value.myResults.sub;
                      spread = value.myResults.spread;
                      active  =value.myResults.active;
                    $scope.data = {};
                    $scope.data.valuesOne = [sub];
                    $scope.data.valuesTwo = [spread];
                    $scope.data.valuesThree = [active];
                    $scope.aValues = [$scope.data.valuesOne,$scope.data.valuesTwo,$scope.data.valuesThree];
                    $scope.myJson = {
                        type : "bar",
                        "background-color": "white",
                        "plot": {
                            "stacked": true,
                            "stack-type":"normal"
                        },
                        title:{
                            backgroundColor : "transparent",
                            fontColor :"black",
                            text : "Hello world"
                        },
                        backgroundColor : "white",
                        series : [
                            {
                                backgroundColor : '#00baf2'
                            },
                            {
                                backgroundColor : '#4caf4f'
                            }
                        ]
                    };
             });
            },
            function(errResponse){
                console.error('Error while data retrieval');
            });
    }

}]);

html代码：

  <div ng-controller="myController">
            <div zingchart id="chart-2" zc-json="myJson" zc-width="700px" zc-height="568px" zc-values="aValues"></div>
  </div>

使用上面提到的js代码，我应该在UI上看到3个条形图，我只能查看一个条形图。请建议。

Answer 1

您需要在数据上调用foreach，而不是整个图表。像这样：

...
function(response) {

    $scope.myJson = {
        type: "bar",
        "background-color": "white",
        "plot": {
            "stacked": true,
            "stack-type": "normal"
        },
        title: {
            backgroundColor: "transparent",
            fontColor: "black",
            text: "Hello world"
        },
        backgroundColor: "white",
        series: [
            {
                backgroundColor: '#00baf2'
            },
            {
                backgroundColor: '#4caf4f'
            }
        ]
    };

    var subs = []
    var spreads = []
    var actives = []

    $scope.aValues = [subs, spreads, actives]

    angular.forEach(response, function (value, key) {
        subs.push(value.myResults.sub)
        spreads.push(value.myResults.spreads)
        actives.push(value.myResults.active)
    });
},
function(errResponse) {
    console.error('Error while data retrieval');
});
...

Answer 2

我必须添加一些内容：

1。 Zingchart语法

您是否已查看过这些文档：https://www.zingchart.com/docs/chart-types/bar-charts/

它说，条形图需要系列对象作为输入，具有以下结构：

  "series": [
    {"values":[20,40,25,50,15,45,33,34]},
    {"values":[5,30,21,18,59,50,28,33]},
    {"values":[30,5,18,21,33,41,29,15]}
   ]

是否必须从HTML提供图表？否则你只需从上面的链接复制JS示例。 恕我直言，这更加清晰，因为你没有在范围内推送那么多数据。

2。覆盖myJson

forEach循环看起来有点不对劲。

有一个angular.forEach应该迭代数组$scope.myJson。但是在迭代器函数中，$scope.myJson会被对象覆盖。

3。 NG-重复

ng-repeat只会重复图表标记。您需要将几个系列传递给指令。