: 어떻게 동적으로 값을 할당 내가 직면하고있어 차트 dynamically.One 문제를 그리려는 <a href="https://plnkr.co/edit/WBApWlwTIDa7HjOQMyxe?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/WBApWlwTIDa7HjOQMyxe?p=preview</a></p> <p>되어 동적으로

Question

여기에 구글 열 차트의 예는 정적 데이터를 사용하여 빌드입니다 틱 : [..] 업데이트 된 플 런커 https://plnkr.co/edit/EGzl2XdQfuMWldzPyfr6?p=preview을 찾으십시오. 나중에 틱 (tick) 값을 지정하려고했는데 :varibale을 만들었지 만 작동하지 않습니다.

PS : 참고 tooltip is not shown as expected when customized

--EDITED--

다음은 아래의 스레드에서 @WhiteHat에 의해 제안 업데이트 된 코드입니다. 아래는 동적으로 데이터를 얻고 그것을 {"v": i, "f": hAxisValue}

의 f: 속성에 지정된 값을 보이고, h는 축상의 chart.Issue가 H 축 dynamicTrick가 표시되지 않는 코드 아래 함께 표시 JS 코드

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