Можно ли наметить несколько значений, ";"ячейки с разделителями в Google Viz API? - PullRequest
Новая
       17

Можно ли наметить несколько значений, ";"ячейки с разделителями в Google Viz API?

0 голосов
/ 02 июня 2019

У меня есть Google Sheet, который вроде как настроен так: 

    [['user', lang'],
    ['user1', 'eng'],
    ['user2', 'eng;fre'],
    ['user3', 'eng;ger'],
    ...]

Возможно ли использовать Google Visuzalisation API для рисования диаграмм из этой таблицы, которые подсчитывают значения, разделенные символом ";"в столбце «lang» отдельно,

, так что, например, диаграмма таблицы будет отображаться как 

    'lang', 'count'
    'eng', '3'
    'fre', '1'
    'ger', '1'

Следовательно, возможно, что другие диаграммы будут следовать этому;например, если я получу круговую диаграмму%, результат будет 

    eng 100%
    fre 33%
    ger 33%

Или я должен создать отдельные таблицы данных, где строка представляет собой уникальную комбинацию каждой возможности?то есть 

     [['user', lang'],
     ['user1', 'eng'],
     ['user2', 'eng'],
     ['user2', 'fre'],
     ['user3', 'eng'],
     ['user3', 'ger']
     ...]

Можно ли этого избежать?

1 Ответ

0 голосов
/ 03 июня 2019

некоторые манипуляции требуются.

В Google есть метод group , который мы можем использовать для подсчета / суммирования по языку

, но сначала нам нужно разделить список для каждого пользователя 

  // split lang on semi-colon
  var list = row[1].split(';');
  list.forEach(function (lang) {
    // add row for each lang
    chartData.push([lang]);
  });

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart', 'table']
}).then(function () {
  var arrayData = [
    ['user', 'lang'],
    ['user1', 'eng'],
    ['user2', 'eng;fre'],
    ['user3', 'eng;ger'],
    ['user4', 'fre;ger'],
  ];

  var chartData = [];

  // process each data row
  arrayData.forEach(function (row, index) {
    if (index === 0) {
      // column heading
      chartData.push([row[1]]);
    } else {
      // split lang on semi-colon
      var list = row[1].split(';');
      list.forEach(function (lang) {
        // add row for each lang
        chartData.push([lang]);
      });
    }
  });

  // create google data table
  chartData = google.visualization.arrayToDataTable(chartData);

  // group data table by lang
  var groupData = google.visualization.data.group(
    chartData,
    [0],
    [{
      column: 0,
      type: 'number',
      label: 'count',
      aggregation: google.visualization.data.count
    }]
  );

  var pie = new google.visualization.PieChart(document.getElementById('pie'));
  pie.draw(groupData, {width: 300});
  var table = new google.visualization.Table(document.getElementById('table'));
  table.draw(groupData);
});
.dashboard {
  text-align: center;
}

.chart {
  display: inline-block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="dashboard">
  <div class="chart" id="pie"></div>
</div>
<div class="dashboard">
  <div class="chart" id="table"></div>
</div>
...