Question

以下是使用静态数据构建的Google柱形图示例：https://plnkr.co/edit/WBApWlwTIDa7HjOQMyxe?p=preview

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

PS：参考tooltip is not shown as expected when customized

- 编辑 -

以下是@WhiteHat在以下主题中建议的更新代码。下面是用于动态获取数据并显示图表的js代码。问题是下面的代码 h轴dynamicTrick未显示，在h轴上显示{{}中给出的值1}} 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(); }]);时，浏览器控制台上会显示以下错误，并且UI上不显示任何图表。

cData[j].c[0].v

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

分配ticks的值：动态

1 个答案: