Google Charts: пользовательский вид столбцов в таблице - PullRequest
Новая
       44

Google Charts: пользовательский вид столбцов в таблице

1 голос
/ 09 февраля 2020

Я пытаюсь создать таблицу Google Charts с двумя раскрывающимися кнопками, которые показывают основной KPI в виде одного столбца при выборе одной из раскрывающихся кнопок, а также все столбцы KPI до этого.

Например, когда выбран Основной KPI 2 и отображается этот столбец, также должны отображаться также столбцы KPI 4, KPI 5, KPI 6 и KPI 7. И когда вы изменяете в раскрывающемся столбце значение «Основной KPI 3», тогда должен отображаться только этот столбец, а также столбцы «KPI 9» и «KPI 10».

Возможно ли это?

I пытался выяснить это с представлением в таблице параметров.
{type: 'number',label: data.getColumnLabel(2),calc: function (dt, row) {return dt.getValue(row, 3)}}

Вот пример графика c: Example graphic

Есть идеи или предложения?

Здесь JSFiddle : https://jsfiddle.net/tototatutu/zgy4h75c/5/

Здесь весь HTML Файл : https://drive.google.com/file/d/10MicBrGMsIvhTAvr5PevV-G9bNYtgPzt/view?usp=sharing

1 Ответ

1 голос
/ 10 февраля 2020

для отображения каждого отдельного столбца kpi,
kpi должен иметь свой собственный столбец в таблице данных.

В настоящее время все находятся в одном столбце - 'KPIs'

мы можем преобразовать существующую таблицу данных, используя представление данных.

здесь мы используем метод таблицы данных getDistinctValues(colIndex) для построения списка уникальных KPI,
, затем добавляем уникальный столбец в представление данных для каждого
, мы также агрегируем представление данных, в Чтобы все значения были в одной строке. 

// create data view with columns for each KPI
var view = new google.visualization.DataView(data);
var aggColumns = [];
var viewColumns = [0, 1];
data.getDistinctValues(2).forEach(function (kpi, index) {
  // add view column for kpi
  viewColumns.push({
    calc: function (dt, row) {
      if (dt.getValue(row, 2) === kpi) {
        return dt.getValue(row, 3);
      }
      return null;
    },
    label: kpi,
    type: 'number'
  });

  // add agg column for id
  aggColumns.push({
    aggregation: google.visualization.data.sum,
    column: index + 2,
    label: kpi,
    type: 'number'
  });
});
view.setColumns(viewColumns);

// aggregate data view
var aggData = google.visualization.data.group(
  view,
  [0, 1],
  aggColumns
);

далее, чтобы изменить представление таблицы при смене фильтра,
мы не сможем использовать метод приборной панели bind.

Вместо этого мы рисуем фильтры вручную, используя исходную таблицу данных.
Затем прослушиваем событие 'statechange',
, чтобы построить представление таблицы, и рисуем. 

// Create a filter, passing some options
var peergroupFilter = new google.visualization.ControlWrapper({
  controlType: 'CategoryFilter',
  containerId: 'filter_div',
  dataTable: data,
  options: {
    filterColumnLabel: 'Peer Group',
    ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        caption: 'Choose Peer Group',
        sortValues: false,
        allowNone: false,
    }}
});
google.visualization.events.addListener(peergroupFilter, 'statechange', setKPI);
peergroupFilter.draw();

// Create a filter, passing some options
var kpiFilter = new google.visualization.ControlWrapper({
  controlType: 'CategoryFilter',
  containerId: 'filter_div2',
  dataTable: data,
  options: {
    filterColumnLabel: 'KPIs',
    values: ['Main KPI 1', 'Main KPI 2', 'Main KPI 3', 'Main KPI 4', 'Main KPI 5', 'Main KPI 6', 'Main KPI 7'],
    ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        caption: 'Choose KPI',
        sortValues: false,
        allowNone: false,
    }}
});
google.visualization.events.addListener(kpiFilter, 'statechange', setKPI);
kpiFilter.draw();

когда событие 'statechange' срабатывает на любом из фильтров,
мы получаем выбранные значения фильтра - getState().

мы используем значение группы пиров, чтобы установить строки,
и фильтр kpi, чтобы установить столбцы.
затем рисуем таблицу. 

function setKPI() {
  // get filter values
  var peerGroup = peergroupFilter.getState().selectedValues[0];
  var kpi = kpiFilter.getState().selectedValues[0];

  // get rows
  var rows = aggData.getFilteredRows([{
    column: 1,
    value: peerGroup
  }]);

  // get columns
  var cols = [0];
  switch (kpi) {
    case 'Main KPI 1':
      cols.push(getColumnIndex('KPI 1', aggData));
      cols.push(getColumnIndex('KPI 2', aggData));
      break;

    case 'Main KPI 2':
      cols.push(getColumnIndex('KPI 4', aggData));
      cols.push(getColumnIndex('KPI 5', aggData));
      cols.push(getColumnIndex('KPI 6', aggData));
      cols.push(getColumnIndex('KPI 7', aggData));
      break;

    case 'Main KPI 3':
      cols.push(getColumnIndex('KPI 9', aggData));
      cols.push(getColumnIndex('KPI 10', aggData));
      break;

    case 'Main KPI 4':
      cols.push(getColumnIndex('KPI 12', aggData));
      cols.push(getColumnIndex('KPI 13', aggData));
      break;

    case 'Main KPI 5':
      cols.push(getColumnIndex('KPI 15', aggData));
      cols.push(getColumnIndex('KPI 16', aggData));
      cols.push(getColumnIndex('KPI 17', aggData));
      break;

    case 'Main KPI 6':
      cols.push(getColumnIndex('KPI 19', aggData));
      cols.push(getColumnIndex('KPI 20', aggData));
      break;

    case 'Main KPI 7':
      cols.push(getColumnIndex('KPI 22', aggData));
      cols.push(getColumnIndex('KPI 23', aggData));
      break;
  }
  cols.push(getColumnIndex(kpi, aggData));

  // format columns
  cols.forEach(function (colIndex) {
    if (colIndex === 0) {
      return;
    }
    formatNumber.format(aggData, colIndex);
    formatBar.format(aggData, colIndex);
  });

  // set view, draw table
  Table.setView({
    columns: cols,
    rows: rows
  });
  Table.draw();
}

см. Следующий рабочий jsfiddle ...
https://jsfiddle.net/476kfovs/

...