时间戳

首页 > 解决方案 > 谷歌图表没有显示数据数组中的最后一行？

google-visualization - 谷歌图表没有显示数据数组中的最后一行？

问题描述

我有 45 行的数据数组，但在我使用“setColumns”隐藏 8 到 14 之间的列然后重新启用 8 到 14 之间的任何列之后，屏幕上只有 44 行可见：

第 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 行，最后一行的时间日期为“2018 年 5 月 10 日，14:44:36”
  2. 向上滚动并单击“全选/取消全选”。您可以向下滚动表格以查看现在我们有 44 行
  3. 单击“全选/取消全选”或“record8”。向下滚动页面可以看到我们的表格中还有 44 行

标签： google-visualization

解决方案

数据视图类

.hideColumns()方法

DataView 类是 DataTable 类的特殊版本。其主要目的是呈现 DataTable(s) 的一部分。OP 代码需要使用赞美.setColumns()which is.hideColumns()。

在下面的演示 1中，有一个三元组，它通过使用这两种 方法[0,...14]来切换列。该表有 90 行，并且在切换列之间保持为 90。[8...14]set/hideColumns()

例子

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]）；

⭐</sup> Demo 2（位于本文底部）不是解决方案，但如果您决定不使用Demo 1 ，它可以帮助 OP 代码。

演示 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>
⭐</sup>虽然我强烈建议您使用hideColumns()来自Google Visualization API，但我想解决这个问题：

"// 按键删除，因为 splice 在删除时不保留键"

splice()返回它删除的任何内容。因此，您调用splice()并将其返回存储在 a 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);

推荐阅读