Google Charts не отображает последнюю строку в массиве данных? - PullRequest
0 голосов
/ 11 мая 2018

У меня есть массив данных с 45 строками, но на экране видны только 44 строки после того, как я скрыл столбцы между 8 и 14, используя setColumns, а затем снова включил любой из столбцов между 8 и 14:

45-я строка содержит следующие данные:

0:{wf: "10 May 2018, 14:44:36"}
1:{wf: ""}
2:{wf: ""}
3:{wf: ""}
4:{wf: ""}
5:{wf: ""}
6:{wf: ""}
7:{wf: ""}
8:{wf: "69.9"}
9:{wf: "73.2"}
10:{wf: "65.2"}
11:{wf: "73.2"}
12:{wf: "82.8"}
13:{wf: "0"}
14:{wf: "28.6"}

Для переключения столбцов я использую следующие команды:

    performColumnToggle: function (col)
    {
        // use original unfiltered data
        _view = new google.visualization.DataView(_original_data);

        // get a key due to splice not keeping keys one delete
        var key = $.inArray(col, _toggledColumns);

        if (_columns[col]['status'] === 1) {
            _columns[col]['status'] = 0;
            // delete by key because splice doesn't keep keys on delete 
            _toggledColumns.splice(key, 1);

        } else {
            _columns[col]['status'] = 1;
            // insert new items with a key and push other columns
            _toggledColumns.splice(col, 0, col);
        }
        // set columns to display
        _view.setColumns(_toggledColumns);
        console.log(_chart.getDataTable().getNumberOfRows()); // keeps returns 44 rather then 45.
        _dashboard.draw(_view);
    }

Я устанавливаю _original_data при первом запуске диаграммы и когдаЯ должен обновить данные в графике.Когда я выполняю console.log (_original_data), я вижу все 45 строк.

    init_chart: function ()
    { 
        _data = new google.visualization.DataTable(_tableData);
        _original_data = _data;

        // some other code ....
    }

    updateData: function ()
    { 
        _tableData = data;
        _data = new google.visualization.DataTable(_tableData);
        _original_data = _data;

        // some other code ....
    }

Ниже приведен пример кода

https://jsfiddle.net/Spiker/g0k714h7/

Чтобы вызвать ошибкувыполните следующие действия:

  1. Прокрутите страницу вниз, и вы заметите, что у нас есть 45 строк, причем последняя строка имеет дату времени "10 мая 2018, 14:44:36"
  2. Прокрутка назади нажмите «Выбрать / Отменить выбор».Вы можете прокрутить таблицу вниз, чтобы увидеть, что теперь у нас есть 44 строки
  3. . Или нажмите «Выбрать / Отменить выбор всех» или «record8».Прокрутите страницу вниз, чтобы увидеть, что у нас еще есть 44 строки в таблице

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

проблема возникает в функции -> switchOffAllColumns

должна быть какая-то ошибка с представлением

, устанавливающим столбцы представления на ChartWrapper, а неDataView,
исправляет проблему

в switchOffAllColumns, измените следующую строку ...

_view.setColumns(_toggledColumns);

на ...

_chart.setView({
  columns: _toggledColumns
});

см. следующую рабочую скрипку ...

https://jsfiddle.net/WhiteHat/o0j70y9r/

примечание: jsapi больше не следует использовать, измените над скриптом для использования loader.js оператор загрузки ...

0 голосов
/ 16 мая 2018


Класс DataView

.hideColumns() Метод


Класс DataView - это специальная версия класса DataTable. Его основная цель - представить часть (и) DataTable. Код OP должен переключать столбцы с помощью метода, который дополняет .setColumns(), что составляет .hideColumns().

В Demo 1 ниже есть троичный, который переключает столбцы с [0,...14] до [8...14] столбцов, используя оба метода set/hideColumns(). Таблица имеет 90 строк, и она сохраняется на уровне 90 между переключениями столбцов.

* 1 042 * Пример
var dView = status === 'on' ? view.setColumns ([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 , 12, 13, 14]) : view.hideColumns ([0, 1, 2, 3, 4, 5, 6, 7]);

Демонстрация 2 (расположена в нижней части этого поста) не является решением, но это может помочь коду OP, если вы решите не использовать Демонстрация 1 .


Демо 1


.as-console-wrapper.as-console-wrapper {
  max-height: 15px;
  color: red
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <style>
    @import url('https://fonts.googleapis.com/css?family=Raleway');
    html {
      height: 100%;
      width: 100%;
      font: 400 16px/1.1 Raleway;
    }
    
    body {
      position: relative;
      overflow: auto;
    }
    
    main {
      overflow: auto;
    }
    
    .btn {
      width: 11ch;
      font: inherit;
    }
    
    .btn.on::after {
      content: '\a0ON';
    }
    
    .btn.off::after {
      content: '\a0OFF';
    }
    
    .heavy {
      font-weight: 900;
    }
    
    .darkBkg {
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
    }
    
    .active {
      background: rgba(200, 150, 20, 0.3);
      color: #000;
    }
    
    .tomato {
      color: tomato
    }
    
    .font {
      font-family: Raleway;
    }
    
    .right {
      text-align: right;
    }
    
    .big {
      font-size: 20px
    }
  </style>
</head>

<body>
  <main>
    <button class='btn off' type='button'>VIEW</button>
    <figure id='table'></figure>
  </main>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['table']
    });
    google.charts.setOnLoadCallback(drawTable);

    var cssClassNames = {
      'headerRow': 'heavy font',
      'tableRow': '',
      'oddTableRow': 'darkBkg',
      'selectedTableRow': 'active',
      'hoverTableRow': 'active',
      'headerCell': 'font',
      'tableCell': 'right font',
      'rowNumberCell': 'big heavy tomato font'
    };
    var options = {
      backgroundColor: {
        fill: 'transparent'
      },
      allowHtml: true,
      showRowNumber: true,
      width: '100%',
      height: '100%',
      'cssClassNames': cssClassNames
    };

    $('.btn').on('click', function(e) {
      $(this).toggleClass('on off');
      var status = $(this).hasClass('on') ? 'on' : 'off';
      console.log(status);
      drawTable(status);
    });


    function drawTable(status) {

      var data = new google.visualization.DataTable();
      data.addColumn('date', 'START');
      data.addColumn('date', 'END');
      data.addColumn('string', 'DESC');
      data.addColumn('number', '0');
      data.addColumn('number', '1');
      data.addColumn('number', '2');
      data.addColumn('number', '3');
      data.addColumn('number', '4');
      data.addColumn('number', 'EXT 0');
      data.addColumn('number', 'EXT 1');
      data.addColumn('number', 'EXT 2');
      data.addColumn('number', 'EXT 3');
      data.addColumn('number', 'COL 0');
      data.addColumn('number', 'COL 1');
      data.addColumn('number', 'COL 2');

      var time = new google.visualization.DateFormat({
        formatType: 'short'
      });

      data.addRows([
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
        [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
        [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
        [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0]
      ]);

      var table = new google.visualization.Table(document.getElementById('table'));

      var view = new google.visualization.DataView(data);

      var dView = status === 'on' ? view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]) : view.hideColumns([0, 1, 2, 3, 4, 5, 6, 7]);

      table.draw(view, options);
    }
  </script>
  <!--<script src='gvis-api.js'></script>-->
</body>

</html>

Хотя я настоятельно рекомендую использовать hideColumns() из API визуализации Google , я хотел бы остановиться на этом:

"// удалить по ключу, потому что сплайс не удерживает ключи при удалении"

splice() возвращает все, что он удаляет. Таким образом, вы звоните на splice() и сохраняете его возврат в var, const, array, object и т. Д.


Демо 2


var columnArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

var removedArray = columnArray.splice(0, 8);

console.log('Removed Column Array: ' + removedArray);
console.log('Remaining Column Array: ' + columnArray);

var restoredArray = removedArray.concat(columnArray);

console.log('Restored Column Array: ' + restoredArray);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...