：静的データを使用して構築ここで動的

Question

は、Googleの縦棒グラフの例である：https://plnkr.co/edit/WBApWlwTIDa7HjOQMyxe?p=preview

私は私が直面してるチャートdynamically.Oneの問題を描きたいのは、動的に値を割り当てる方法でありますダニ：[..] 更新されたplunker https://plnkr.co/edit/EGzl2XdQfuMWldzPyfr6?p=previewを見つけてください。 ダニの値を割り当てようとしましたが、後でvaribale dynamicTicksを作成しても、[..]は動作しません。

PS：リファレンスtooltip is not shown as expected when customized

--EDITED--

以下は、以下のスレッドで@WhiteHatによって提案された更新されたコードです。以下 JSコードが動的データを取得し、chart.Issueは、以下のコード時間軸dynamicTrickがが表示されていないとされたディスプレイである、時間軸上では{"v": i, "f": hAxisValue}

の f:プロパティで指定された値を示しています

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");