Google Visualization/Charts JS 库 (TimeLine)：DataTable 限制答案

【问题标题】：Google Visualization/Charts JS library (TimeLine): DataTable limitationsGoogle Visualization/Charts JS 库 (TimeLine)：DataTable 限制
【发布时间】：2021-11-09 23:30:38
【问题描述】：

我正在使用 Google 的 Visualization JS 库，带有 Timeline 图表类型。我有一个时间轴图表，并且正在工作。它有 5 个数据列。

我想添加一个新的数据列，以便我可以用该记录的数据库 ID 标记每一行。我想让图表可点击：用户单击一个栏并转到该栏的详细信息。

但是当我在 JS 代码中添加一个新的 addcolumn() 并匹配 addrow() 数组中的数据时，它给了我一个关于无效列的错误。

（我已经能够将 Style 列添加到数据对象中......但我确实必须将它放在数据列的中间 - 如果我将 Style 列作为集合中的最后一列。）

这是一个显示工作列和图表的 JSFiddle：https://jsfiddle.net/t9yfe2jm/

<head>
<style>
body {
  height: 95%;
}

.chart-height {
  height: 100%;
}
</style>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  
    
  function drawChart() {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

        google.visualization.events.addListener(chart, 'select', myClickHandler);

        dataTable.addColumn({ type: 'string', id: 'TaskGroup' });
    dataTable.addColumn({ type: 'string', id: 'bar label' });
    dataTable.addColumn({ type: 'string', role: 'tooltip' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

        dataTable.addRows( [
      ["Admin", "Test ABC ABC", "  • Test ABC ABC", new Date (2021, 10, 6), new Date (2021, 10, 15)]
      , ["CAD", "#1 TEST", "  • #1  - TEST", new Date (2021, 10, 7), new Date (2021, 10, 8)]
      , ["Field", "Field work - TEST TEST", "  • Field work - TEST", new Date (2021, 10, 6), new Date (2021, 10, 10)]
      , ["CAD", "2 TEST TEST", "  • 2   -  TEST TEST", new Date (2021, 10, 11), new Date (2021, 10, 14)]
      , ["Admin", "Test ITEM 1", "  • Test ITEM 1", new Date (2021, 10, 6), new Date (2021, 10, 10)]
      , ["Field", "Test part 2", "  • Field Test part 2", new Date (2021, 10, 13), new Date (2021, 10, 15)]
      , ["Field", "Test Part 3", "  • Field Test Part 3", new Date (2021, 10, 14), new Date (2021, 10, 17)]
        ]);

  chart.draw(dataTable);

  function myClickHandler(){
    var selection = chart.getSelection();
    var message = '';
    var selectedValue = '';

    for (var i = 0; i < selection.length; i++) {
      var item = selection[i];
      if (item.row != null && item.column != null) {
        message += '{row:' + item.row + ',column:' + item.column + '}';
      } else if (item.row != null) {
        message += '{row:' + item.row + '}';
        selectedValue = item.row;
      } else if (item.column != null) {
        message += '{column:' + item.column + '}';
        selectedValue = item.column;
      }
    }
    if (message == '') {
      message = 'nothing';
    }
    alert('You selected ' + selectedValue + '\nValue = ' + dataTable.getValue(selectedValue,0) + '|' + dataTable.getValue(selectedValue,1) );
  }
}

  </script>
</head>
<body>
  <div class="chart-height" id="chart_div"></div>
</body>
</html>

这是损坏的 JSFiddle - 刚刚添加了新列：https://jsfiddle.net/syzrfe82/

<head>
<style>
body {
  height: 95%;
}

.chart-height {
  height: 100%;
}
</style>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  
    
  function drawChart() {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

        google.visualization.events.addListener(chart, 'select', myClickHandler);

        dataTable.addColumn({ type: 'string', id: 'TaskGroup' });
    dataTable.addColumn({ type: 'string', id: 'bar label' });
    dataTable.addColumn({ type: 'string', role: 'tooltip' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addColumn({ type: 'string', id: 'RecID' });

        dataTable.addRows( [
            ["Admin", "Test ABC ABC", "  • Test ABC ABC", new Date (2021, 10, 6), new Date (2021, 10, 15), 'aaa1111']
            , ["CAD", "#1 TEST", "  • #1  - TEST", new Date (2021, 10, 7), new Date (2021, 10, 8),'bbb2222']
      , ["Field", "Field work - TEST TEST", "  • Field work - TEST", new Date (2021, 10, 6), new Date (2021, 10, 10),'fff5555']
      , ["CAD", "2 TEST TEST", "  • 2   -  TEST TEST", new Date (2021, 10, 11), new Date (2021, 10, 14),'ddd4444']
      , ["Admin", "Test ITEM 1", "  • Test ITEM 1", new Date (2021, 10, 6), new Date (2021, 10, 10),'ccc3333']
      , ["Field", "Test part 2", "  • Field Test part 2", new Date (2021, 10, 13), new Date (2021, 10, 15),'ggg6666']
      , ["Field", "Test Part 3", "  • Field Test Part 3", new Date (2021, 10, 14), new Date (2021, 10, 17), 'zzz0000']
        ]);

    chart.draw(dataTable);

   function myClickHandler(){
    var selection = chart.getSelection();
    var message = '';
    var selectedValue = '';

    for (var i = 0; i < selection.length; i++) {
      var item = selection[i];
      if (item.row != null && item.column != null) {
        message += '{row:' + item.row + ',column:' + item.column + '}';
      } else if (item.row != null) {
        message += '{row:' + item.row + '}';
        selectedValue = item.row;
      } else if (item.column != null) {
        message += '{column:' + item.column + '}';
        selectedValue = item.column;
      }
    }
    if (message == '') {
      message = 'nothing';
    }
    alert('You selected ' + selectedValue + '\nValue = ' + dataTable.getValue(selectedValue,0) + '|' + dataTable.getValue(selectedValue,1) );
  }
}


  </script>
</head>
<body>
  <div class="chart-height" id="chart_div"></div>
</body>
</html>

那么，这只是对 TimeLine 图表的 DataTable 对象的限制吗？看起来很奇怪，因为我能够添加 Style 列，但不能添加任意数据列。（这个 Style 列在上面的 JSfiddle 示例中不存在。我确实注意到我必须将 Style 列放在数组的第三个位置......而不是它在最后一个位置时不起作用。我没有'不要尝试所有其他位置，看看它们是否也可以工作。）除非 JS 从最终对象中删除 Style 列。

错误消息也不是真的准确 - 它说 3-4 个数据列，但文档列出了 5 个（不包括样式列）。

谢谢。

【问题讨论】：

标签： javascript charts google-visualization timeline

【解决方案1】：

请参阅data format 了解时间线图，
它指定列索引 2 中需要工具提示。

有几种方法可以完成。
最明显的是使用数据视图，
从图表中隐藏附加列。

我们仍然可以稍后访问数据表，从额外的列中提取数据。

首先，像往常一样创建带有额外列的数据表。

var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'TaskGroup' });
dataTable.addColumn({ type: 'string', id: 'bar label' });
dataTable.addColumn({ type: 'string', role: 'tooltip' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({ type: 'string', id: 'RecID' });

dataTable.addRows( [
  ["Admin", "Test ABC ABC", "  • Test ABC ABC", new Date (2021, 10, 6), new Date (2021, 10, 15), 'aaa1111']
  , ["CAD", "#1 TEST", "  • #1  - TEST", new Date (2021, 10, 7), new Date (2021, 10, 8),'bbb2222']
  , ["Field", "Field work - TEST TEST", "  • Field work - TEST", new Date (2021, 10, 6), new Date (2021, 10, 10),'fff5555']
  , ["CAD", "2 TEST TEST", "  • 2   -  TEST TEST", new Date (2021, 10, 11), new Date (2021, 10, 14),'ddd4444']
  , ["Admin", "Test ITEM 1", "  • Test ITEM 1", new Date (2021, 10, 6), new Date (2021, 10, 10),'ccc3333']
  , ["Field", "Test part 2", "  • Field Test part 2", new Date (2021, 10, 13), new Date (2021, 10, 15),'ggg6666']
  , ["Field", "Test Part 3", "  • Field Test Part 3", new Date (2021, 10, 14), new Date (2021, 10, 17), 'zzz0000']
]);

然后创建一个数据视图，隐藏多余的列，并使用数据视图绘制图表。

var dataView = new google.visualization.DataView(dataTable);
dataView.hideColumns([dataTable.getNumberOfColumns() - 1]);

chart.draw(dataView);

【讨论】：

希望对您有所帮助...
感谢您的建议 - 我会尝试一下。
是的，这看起来效果很好。谢谢！