javascript - 无法在 haxis 上显示刻度

Question

我试图在轴上显示刻度值。下面是动态获取数据并生成柱形图的代码。 以下代码的问题是未显示 h 轴 dynamicTicks，在 h 轴上它显示 f: cData 中 {"v": i, "f": hAxisValue} 的属性中给出的值。在演示示例中也是如此 https://plnkr.co/edit/G5wUQjVZ0512RvqltIqm?p=preview但是当应用于我的本地应用程序时，它不会在 haxis 上显示刻度值。有什么建议吗？

app.controller('myController', ['$scope', '$uibModal', 'MyService', function ($scope, $uibModal, MyService) {
    $scope.chart = {};
    $scope.chart.type = "ColumnChart";
    $scope.chart.displayed = false;
    var dynamicTicks = [];
    $scope.chart.options = {
         focusTarget: 'category',
        "fill": 20,
        "displayExactValues": true,
        "isStacked": 'true',
         tooltip: {text: 'value',textStyle: {fontName: '"Arial"'}},
        hAxis: {
            titleTextStyle: {bold: 'true'},
            slantedText: false,
            ticks: dynamicTicks
        },
      };

    $scope.chart.view = {
        columns: [0, 1, 2, 3]
    };
     $scope.chart.data = {
        "cols": [
            {id: "label", label: "Label", type: "string"},
            {id: "count", label: "Count", type: "number"},
            {id: "pizza", label: "Pizza", type: "number"},
            {id: "softDrink", label: "SoftDrink", type: "number"},
        ]
    };

    $scope.loadMyChart = function () {
        MyService.getChartData().then(
            function (response) {
                $scope.myResponse= response;
                //check for error
                var count = 0;
                var pizza = 0;
                var softDrink = 0;
                var myRows = [];
                $scope.chart.data.rows = {};
                  var i = 0; var cData=[];
                angular.forEach($scope.myResponse, function (value, key) {
                    count = value.myData.count;
                    pizza = value.myData.pizza;
                    softDrink = value.myData.softDrnk;
                    hAxisValue = value.myData.title;

                   cData = {
                        "c": [{"v": i, "f": hAxisValue}, {"v": passsed},
                            {"v": failed},
                            {"v": notExecute}, {"v": key}]
                    };
                     myRows.push(cData); i++;
           });
                alert("cData.length " + i);
                //assign the haxis ticks values
                 for (var j = 0; j < i; j++) {
                    alert("in for" + j + "Series" + (j+1)); //This alert is being executed..
                    dynamicTicks.push({
                        v: j, /*cData[j].c[0].v - when this is used, it is showing the error angular.min.js:sourcemap:119 TypeError: Cannot read property 'c' of undefined and chart is not displayed*/
                        f: 'Series ' + (j + 1)
                    });
                }
               $scope.chart.data.rows = myRows;
           },  
    }
         $scope.loadMyChart();    
}]);

Answer 1

需要为选项分配刻度，在构建刻度之后...

            for (var j = 0; j < i; j++) {
                alert("in for" + j + "Series" + (j+1)); //This alert is being executed..
                dynamicTicks.push({
                    v: j, /*cData[j].c[0].v - when this is used, it is showing the error angular.min.js:sourcemap:119 TypeError: Cannot read property 'c' of undefined and chart is not displayed*/
                    f: 'Series ' + (j + 1)
                });
            }
            $scope.chart.options.hAxis.ticks = dynamicTicks;