javascript - 分配刻度值 : dynamically

Question

这是使用静态数据构建的谷歌柱形图示例:https://plnkr.co/edit/WBApWlwTIDa7HjOQMyxe?p=preview

我想动态绘制图表。我面临的一个问题是如何动态分配刻度值:[..]请找到更新的 plunker https://plnkr.co/edit/EGzl2XdQfuMWldzPyfr6?p=preview .我试图通过创建变量 dynamicTicks 为 ticks:[..] 分配值，但它不起作用。

PS:引用tooltip is not shown as expected when customized

--编辑--

下面是@WhiteHat 在下面的线程中建议的更新代码。下面是动态获取数据并显示图表的 js 代码。问题在于下面的代码不显示 h 轴 dynamicTrick，在 h 轴上显示的是 中给出的值>f: 属性 {"v": i, "f": hAxisValue}

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);
                 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 */
                        f: 'Series ' + (j + 1)
                    });
                }
               $scope.chart.data.rows = weekRows;
           },  
    }
         $scope.loadMyChart();    
}]);

当使用语句cData[j].c[0].v时，浏览器控制台显示以下错误并且UI上没有显示图表。

angular.min.js:sourcemap:119 TypeError: Cannot read property 'c' of undefined

Answer 1

您不会在创建图表数据和选项的地方构建动态报价吗？

有点像……

var createChart = function (rows, label) {
      return {
          "type": "ColumnChart",
          "data": {
              "cols": [
                  {"id": label, "label": label, "type": "number"},
                  {"id": "count", "label": "count", "type": "number"},
                  {"id": "pizza", "label": "Pizza", "type": "number"},
                  {"id": "softdrink", "label": "Softdrink", "type": "number"}
              ],
              "rows": rows
          },
          "options": {
              "title": label,
              "isStacked": "true",
               focusTarget: 'category',
             hAxis: {
            baselineColor: 'transparent',
            gridlines: {
              color: 'transparent'
            },
            slantedText: false,
            "ticks": dynamicTicks,
          },
          tooltip: {
            text: 'value'
          }
          }
      }
  };

var data = [
  {"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]},
  {"c":[{"v": 1, "f":"Aug - Sept"},{"v":70},{"v":"35"},{"v":"35"}]},
  {"c":[{"v": 2, "f":"Oct - Dec"},{"v":80},{"v":"40"},{"v":"40"}]}    
];

var dynamicTicks = [];
for (var i = 0; i < data.length; i++) {
  dynamicTicks.push({
    v: data[i].c[0].v,
    f: 'Series ' + (i + 1)
  });
}

$scope.myChart = createChart(data, "Data Series");