Цикл Google Chart Data Rows - PullRequest
Новая
       9

Цикл Google Chart Data Rows

0 голосов
/ 18 сентября 2018

У меня есть данные в следующем формате, ниже приведен только пример 

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

Но я не могу перебрать строки, чтобы выполнить те же функции. Помощь оценена.

Примечание: я не могу добавить свойство цвета при создании таблицы данных. Я должен сделать функциональность после создания представления или только для данных.

1 Ответ

0 голосов
/ 18 сентября 2018

для круговой диаграммы вы можете выполнить цикл с помощью -> 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 не будет работать.
, если имеется только одна серия -> *Вместо 1018 *

необходимо использовать роль '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>
...