文章/答案/技术大牛

发布

社区首页 >问答首页 >Google可视化/图表JS库(TimeLine)：DataTable限制

问Google可视化/图表JS库(TimeLine)：DataTable限制
EN

Stack Overflow用户

提问于 2021-11-09 23:30:38

回答 1查看 122关注 0票数 1

我使用的是Google的可视化JS库，它的时间线图类型。我已经建立了一个时间图表，并且在工作。它有5个数据列。

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

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

(我已经能够在数据对象中添加样式列.但是我必须把它放在数据列的中间--如果我把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对象的限制吗？看起来很奇怪，因为我可以在其中添加样式列，而不是任意的数据列。(在上面的JSfiddle示例中不存在此样式列。我确实注意到我必须把样式列放在数组的第三个位置.相反，当它处于最后一个位置时，它就不能工作了。我没有尝试其他所有的职位，看它们是否也能工作。)除非JS从最终对象中移除样式列。

错误信息也不是真正的准确，它显示的是3-4个数据列，但是文档列出了5(不包括样式列)。

谢谢。

javascript

charts

google-visualization

timeline

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-10 14:59:08

时间线图见数据格式，

它指定列索引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);

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69906318

复制

相似问题

问Google可视化/图表JS库(TimeLine)：DataTable限制
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google可视化/图表JS库(TimeLine)：DataTable限制EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google可视化/图表JS库(TimeLine)：DataTable限制
EN