Визуализация Google - Создание нового DataTable из существующего DataTable? - PullRequest
0 голосов
/ 23 октября 2019

Хотелось бы узнать, как сделать новый DataTable из существующего DataTable?

Вариант использования:
У меня есть proxyTable, который скрыт и подключен к CategoryFilter. Это используется для построения других таблиц на странице, которые все связаны с одним CategoryFilter.

Цель:
Включить строку итоговой суммы в каждую новую таблицу, которая отражает суммирование отфильтрованного выбора.

Исходное решение:Я попытался извлечь массив из sourceData, создать новую таблицу данных с именем dataResults, добавить общую итоговую строку в dataResults и нарисовать финальную таблицу. Это работает, но кажется, много усилий.

var sourceData = proxyTable.getDataTable();

    var rowCount = sourceData.getNumberOfRows();
    var colCount = sourceData.getNumberOfColumns();

    var tempRow = [];
    var tempArray = [];
    var pushValue;

    //push header row
    for (var k = 0; k < colCount; k++) {
      pushValue = sourceData.getColumnLabel(k);
      tempRow.push(pushValue);
    }
    tempArray.push(tempRow);
    tempRow = []; //reset

    //push data rows
    for (var i = 0; i < rowCount; i++) {
      for (var j = 0; j < colCount; j++) {
        pushValue = sourceData.getValue(i, j);
        tempRow.push(pushValue);
      }
      tempArray.push(tempRow);
      tempRow = []; //reset
    }

    //Create new Google DataTable from Array
    var dataResults = new google.visualization.arrayToDataTable(tempArray);

Мой вопрос:
Как мне создать таблицу данных, которая содержит все записи из sourceData, не выполняя описанные выше шаги, которые я пробовал?

Ваше руководство очень ценится!

Рабочий пример:

ОБНОВЛЕНИЕ:
Добавлено var dataResults = sourceData.clone(); за ответ от @WhiteHat, и я получаю ошибку sourceData.clone is not a function

Я неправильно понял синтаксис? Возможно, это ChartWrapper, который я использую?

ОБНОВЛЕНИЕ 2: добавлено var dataResults = sourceData.toDataTable().clone(); за ответ №2 от @WhiteHat, и оно работает.

google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
});

$(document).ready(function() {
  renderChart_onPageLoad();
});

function renderChart_onPageLoad() {
  google.charts.setOnLoadCallback(function() {
    drawDashboard();
  });
}

function drawDashboard() {

  var data = google.visualization.arrayToDataTable([
    ['Name', 'RoolNumber', 'Gender', 'Age', 'Donuts eaten'],
    ['Michael', 1, 'Male', 12, 5],
    ['Elisa', 2, 'Female', 20, 7],
    ['Robert', 3, 'Male', 7, 3],
    ['John', 4, 'Male', 54, 2],
    ['Jessica', 5, 'Female', 22, 6],
    ['Aaron', 6, 'Male', 3, 1],
    ['Margareth', 7, 'Female', 42, 8],
    ['Miranda', 8, 'Female', 33, 6]
  ]);

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

  var categoryPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'categoryPicker',
    options: {
      filterColumnLabel: 'Gender',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false
      }
    }
  });

  var proxyTable = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'proxyTable',
    options: {
      width: '500px'
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table',
    options: {
      width: '500px'
    }
  });

  dashboard.bind([categoryPicker], [proxyTable]);
  dashboard.draw(data);

  google.visualization.events.addListener(dashboard, 'ready', function() {
    redrawChart();
  });

  function redrawChart() {

    var sourceData = proxyTable.getDataTable();
    
    //WhiteHat suggestion2 - WORKS
    var dataResults = sourceData.toDataTable().clone();
    
    //WhiteHat suggestion1 - Didn't work
    //var dataResults = sourceData.clone();   

    //INITIAL SOLUTION - works
    //var rowCount = sourceData.getNumberOfRows();
    //var colCount = sourceData.getNumberOfColumns();

    //var tempRow = [];
    //var tempArray = [];
    //var pushValue;

    //for (var k = 0; k < colCount; k++) {
      //pushValue = sourceData.getColumnLabel(k);
      //tempRow.push(pushValue);
    //}
    //tempArray.push(tempRow);
    //tempRow = []; //reset

    //push data rows
    //for (var i = 0; i < rowCount; i++) {
      //for (var j = 0; j < colCount; j++) {
        //pushValue = sourceData.getValue(i, j);
        //tempRow.push(pushValue);
      //}
      //tempArray.push(tempRow);
      //tempRow = []; //reset
    //}

    //var dataResults = new google.visualization.arrayToDataTable(tempArray);

    var group = google.visualization.data.group(sourceData, [{
      // we need a key column to group on, but since we want all rows grouped into 1, 
      // then it needs a constant value
      column: 0,
      type: 'number',
      modifier: function() {
        return 1;
      }
    }], [{
      column: 1,
      id: 'SumRool',
      label: 'SumRool',
      type: 'number',
      aggregation: google.visualization.data.sum
    }, {
      column: 3,
      id: 'SumAge',
      label: 'SumAge',
      type: 'number',
      aggregation: google.visualization.data.sum
    }, {
      // get the average age
      column: 4,
      id: 'SumEaten',
      label: 'SumEaten',
      type: 'number',
      aggregation: google.visualization.data.sum
    }]);

    dataResults.insertRows(0, [
      ['Grand Total', group.getValue(0, 1), null, group.getValue(0, 2), group.getValue(0, 3)],
    ]);

    //Set dataTable
    table.setDataTable(dataResults);
    table.draw();

  }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="dashboard">
  <div id="categoryPicker"></div><br /> Proxy Table<br />
  <div id="proxyTable"></div><br /> Table
  <br />
  <div id="table"></div><br /><br />
</div>

1 Ответ

1 голос
/ 23 октября 2019

метод таблицы данных -> clone()

var newDataTable = oldDataTable.clone();

из документов ...

clone() - Возвращает клон таблицы данных. Результатом является полная копия таблицы данных за исключением свойств ячейки, свойств строки, свойств таблицы и свойств столбца, которые являются полными копиями;это означает, что не примитивные свойства копируются по ссылке, а примитивные свойства копируются по значению.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...