Question

我的数据格式如下，下面只是一个示例

var data = google.visualization.arrayToDataTable([
      ['Medium', 'Expenses'],
      ['Twitter',      400],
      ['Facebook',      460],
      ['Youtube',       1120],
      ['Instagram',      540]
]);

我想遍历记录并为每个平台赋予适当的颜色。我知道可以为以下列完成此操作：

var view = new google.visualization.DataView(data);
var colors = [];
for (var i = 1; i < view.getNumberOfColumns(); i++) {
  switch (view.getColumnLabel(i)) {
      case "Twitter":
         colors = colors.concat(["#26CEFF"]);
         break;
}

我通过以下选项将其提供给图表：

var options = {
    colors: colors
}
var chart = new google.visualization.PieChart(Div);
chart.draw(view, options);

但是我无法遍历所有行以执行相同的功能。帮助表示赞赏。

注意：创建数据表时，我无法添加color属性。仅在创建视图或数据表后，我才需要执行该功能。

Answer 1

对于饼图，您可以使用-> data.getNumberOfRows()
进行循环根据第一列的值构建colors数组-> Medium

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Medium', 'Expenses'],
    ['Twitter', 400],
    ['Facebook', 460],
    ['Youtube', 1120],
    ['Instagram', 540]
  ]);
  
  var colors = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    switch (data.getValue(i, 0)) {
      case 'Twitter':
        colors.push('#26CEFF');
        break;

      case 'Facebook':
        colors.push('blue');
        break;

      case 'Youtube':
        colors.push('red');
        break;

      case 'Instagram':
        colors.push('green');
        break;
    }
  }

  var options = {
    colors: colors
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.PieChart(container);

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

对于柱形图或条形图，colors选项不起作用。
如果只有一个系列-> 'Expenses'

相反，需要在数据表/视图中使用'style'角色。

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Medium', 'Expenses'],
    ['Twitter', 400],
    ['Facebook', 460],
    ['Youtube', 1120],
    ['Instagram', 540]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      var color;

      switch (dt.getValue(row, 0)) {
        case 'Twitter':
          color = '#26CEFF';
          break;

        case 'Facebook':
          color = 'blue';
          break;

        case 'Youtube':
          color = 'red';
          break;

        case 'Instagram':
          color = 'green';
          break;
      }

      return color;
    },
    type: 'string',
    role: 'style'
  }]);

  var options = {
    legend: 'none'
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);

  chart.draw(view, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

循环Google图表数据行

1 个答案: