Google Charts API - 仪表板：隐藏表格中的行答案

【问题标题】：Google Charts API - Dashboard: Hide rows in tableGoogle Charts API - 仪表板：隐藏表格中的行
【发布时间】：2013-05-14 22:40:50
【问题描述】：

我正在尝试使用 Google Charts API 创建仪表板。

仪表板包括一个类型为 ChartRangeFilter 的 ControlWrapper 和两个 ChartWrapper（LineChart 和 Table）。此设置运行良好，但我想添加一个。

LineChart 应显示整个数据集，Table 仅显示其中的一部分。例如，我有 10 行，在表中只应显示前 8 行。

这是我当前的 ControlWrapper：

control = new google.visualization.ControlWrapper({
 'controlType': 'ChartRangeFilter',
 'containerId': 'control',
 'options': {
   'filterColumnIndex': 0,
   'ui': {
     'chartType': 'LineChart',
     'chartOptions': {
       'chartArea': {'width': '95%'},
       'hAxis': {'baselineColor': 'none'}
     },
     'chartView': {
       'columns': [0,1]
     },
     'minRangeSize': 86400000
   }
 }
});

还有这张桌子：

chart = new google.visualization.ChartWrapper({
 'chartType': 'Table',
 'containerId': 'table',
 'options': {
        width: 470, 
        height: 340, 
        sortColumn: 0,
        sortAscending: false
 },
 'view': {
   'columns': [0, 1]
   //,'rows': [0,1,2,3,4,5,6]
 }
});

当我在表定义中取消注释行 "//,'rows': [0,1,2,3,4,5,6]" 时，当我移动 ControlWrapper 的滑块时出现错误：

Invalid row index 6. Should be in the range [0-5]

有没有办法让它工作？

原因是（在本例中）最后两行中只有第 3 列中的数据，该数据仅显示在 LineChart 中，而未显示在表格中。

提前致谢！

//编辑：

这是一个示例页面： http://circlecount.com/test.chart.range.php

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/MarkUp/SCHEMA/xhtml-rdfa-2.xsd" lang="de" xml:lang="de" dir="ltr" xmlns:og="http://ogp.me/ns#" >
<head>
  <script src="http://www.google.com/jsapi?key=" type="text/javascript"></script> 
  <script type="text/javascript">google.load("jquery", "1.7.1");</script>
 </head>
<body>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart', 'table', 'controls']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(fctDrawChart);

var control, chart;

function fctDrawChart() {
  //follower
  var data = new google.visualization.DataTable();
  var myTempDate = new Date();
  data.addColumn('date', 'Day');
  data.addColumn('number', 'Followers');


data.addRows(10);
data.setCell(0, 0, new Date('11/07/2011'));
data.setCell(0, 1, 11);
data.setCell(1, 0, new Date('11/08/2011'));
data.setCell(1, 1, 222);
data.setCell(2, 0, new Date('11/09/2011'));
data.setCell(2, 1, 1242);
data.setCell(3, 0, new Date('11/10/2011'));
data.setCell(3, 1, 1420);
data.setCell(4, 0, new Date('11/11/2011'));
data.setCell(4, 1, 1609);
data.setCell(5, 0, new Date('11/12/2011'));
data.setCell(5, 1, 1676);
data.setCell(6, 0, new Date('11/13/2011'));
data.setCell(6, 1, 1734);
data.setCell(7, 0, new Date('11/14/2011'));
data.setCell(7, 1, 1773);
data.setCell(8, 0, new Date('11/15/2011'));
data.setCell(8, 1, 1857);
data.setCell(9, 0, new Date('11/16/2011'));
data.setCell(9, 1, 1874);


var dataView = new google.visualization.DataView(data);
dataView.setColumns([0, 1]);



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

    control = new google.visualization.ControlWrapper({
     'controlType': 'ChartRangeFilter',
     'containerId': 'control',
     'options': {
       'filterColumnIndex': 0,
       'ui': {
         'chartType': 'LineChart',
         'chartOptions': {
           'chartArea': {'width': '95%'},
           'hAxis': {'baselineColor': 'none'}
         },
         'chartView': {
           'columns': [0,1]
         },
         'minRangeSize': 86400000
       }
     }
    });

    google.visualization.events.addListener(control, 'statechange', function() {
      $("#periodSelector").val("custom");
    });



    chart = new google.visualization.ChartWrapper({
     'chartType': 'Table',
     'containerId': 'table',
     'options': {
            width: 470, 
            height: 340, 
            sortColumn: 0,
            sortAscending: false
     },
     'view': {
       'columns': [0, 1]
       ,'rows': [0,1,2,3,4,5,6]
     }
    });

    chart2 = new google.visualization.ChartWrapper({
     'chartType': 'LineChart',
     'containerId': 'chart',
     'options': {
            width: 470, 
            height: 340, 
            sortColumn: 0,
            sortAscending: false
     },
     'view': {
       'columns': [0, 1]
     }
    });

    dashboard.bind(control, chart);
    dashboard.bind(control, chart2);
    dashboard.draw(data);

  }


</script>
  <div id='dashboard' >
    <div id='table' style='width:240px;height:400px;'></div>
    <div id='chart' style='width:240px;height:400px;'></div>
    <div id='control' style='width:840px;height:40px;'></div>
  </div>
</div>


</body>
</html>

我想得到什么： - 整个时期（10 天）的图表 - 仅前 7 天的表 - 在整个期间（10 天）的 ControlWrapper，控制图表和表格

我希望这能让我的问题更清楚。如果没有，请给我留言。

提前致谢！

更新： 借助 jmac 的想法，我可以使用以下功能：

google.visualization.events.addListener(control, 'statechange',
  function(event) {
    if (control.getState()["range"]["end"] > myLastRealDate) {
      var myRowsArr = new Array();
      var myTempDate = control.getState()["range"]["start"];
      for (var i=0;i<myLastRealRow-(myDateArr[(myTempDate.getMonth()+1)+"/"+myTempDate.getDate()+"/"+myTempDate.getFullYear()]);i++) {
        myRowsArr.push(i);
      }
      chart.setView({'rows': myRowsArr});
    }
    else {
      chart.setView({'rows': null});
    }
  });

您可以在这里找到一个工作示例：http://circlecount.com/test.chart.range.php

【问题讨论】：

您能否更好地解释一下问题是什么，并在帖子中包含您的完整代码？看起来您只有 6 行数据，但正试图显示 7 行——这与显示表格与折线图的部分数据无关。如果你能更好地解释这个问题，它会更容易提供帮助。
感谢您的反馈 jmac！（因为这里不可能有换行符，所以我已经更新了我的初始帖子）这是一个示例页面：circlecount.com/test.chart.range.php 我想要得到的内容：-整个期间（10 天）的图表-仅前 7 天的表格- 在整个期间（10 天）的 ControlWrapper，控制图表和表格，我希望这能让我的问题更清楚。如果没有，请给我一个备注。提前致谢！

标签： javascript google-visualization

【解决方案1】：

这个问题可以用下面的函数来解决：

google.visualization.events.addListener(control, 'statechange',
  function(event) {
    if (control.getState()["range"]["end"] > myLastRealDate) {
      var myRowsArr = new Array();
      var myTempDate = control.getState()["range"]["start"];
      for (var i=0;i<myLastRealRow-(myDateArr[(myTempDate.getMonth()+1)+"/"+myTempDate.getDate()+"/"+myTempDate.getFullYear()]);i++) {
        myRowsArr.push(i);
      }
      chart.setView({'rows': myRowsArr});
    }
    else {
      chart.setView({'rows': null});
    }
  }
);

每个日期的行数必须保存在一个数组中，例如：

myDateArr['11/7/2011'] = 0;

“中断”的行和日期也必须保存在变量中：

myLastRealDate = new Date('11/14/2011');
myLastRealRow = 7;

这是一个工作示例： http://circlecount.com/test.chart.range.php

【讨论】：

【解决方案2】：

您遇到的问题是您的表设置了固定的行数，而选择器可以将数据表减少到该项目数以下。

解决此问题的一种方法是更改选项，特别是 ui.minRangeSize 大于 7（您希望在图表中显示的行数）。这将使您的控件代码：

control = new google.visualization.ControlWrapper({
 'controlType': 'ChartRangeFilter',
 'containerId': 'control',
 'options': {
   'filterColumnIndex': 0,
   'ui': {
     'chartType': 'LineChart',
     'chartOptions': {
       'chartArea': {'width': '95%'},
       'hAxis': {'baselineColor': 'none'}
     },
     'chartView': {
       'columns': [0,1]
     },
     'minRangeSize': 604800000
   }
 }
});

这可以通过将选择器的范围停止在 7 天以下来防止发生错误。

如果这对您的应用程序来说还不够好，您将不得不做一些棘手的事情，例如this jsfiddle by asgallant。这种方法相当令人困惑，但基本上它所做的是从屏幕上绘制一个隐藏的表格，使用更改事件（当您过滤图表时）来确定表格中的数据，并从过滤后的数据创建一个新的数据表.

然后，您可以使用新的子数据集以任何您喜欢的方式进行过滤。

另一种选择是将表上的行过滤器从rows: [0, 1, 2, 3, 4, 5, 6] 更改为可变行数，具体取决于基础表中的行数。因此，您可以检查滑块的 state（请参阅文档 here）并根据表中的行数（最多 7 行）创建一个动态行数组。

考虑到所有因素，限制滑块的范围可能是最简单的方法，因为这样最不让人头疼。

【讨论】：

非常感谢您的帮助 jmac！我使用了您的最后一个想法：更新行过滤器。我将用更好的格式编辑最初的问题。
如果你能用工作代码回答你自己的问题并将其标记为正确答案，它就有更好的机会帮助后代。如果您愿意，我将不胜感激，我相信后代也会这样做！
当然是jmac！我不习惯 stackoverflow 上的最佳流程（不想将我自己的答案标记为解决方案；））但如果你说这很好，我会这样做。再次感谢！