Question

我无法通过单击Google Timelien图表成功创建活动。我得到的错误是图表未定义。我在Google上尝试了多个答案。

请让我知道您是否可以找出错误。如果您了解如何使用getselection方法或如何打印表的结果。这也将有所帮助。 google时间轴页面上没有从时间轴中进行选择的示例。它只能从表格，条形图或饼图中进行选择

<html>
<head>
    <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('timeline');
        var chart = new google.visualization.Timeline(container);
        var primaryDataTable = new google.visualization.DataTable();

        primaryDataTable.addColumn({ type: 'string' , id: 'LaborID' });
        primaryDataTable.addColumn({ type: 'string' , id: 'WOID' });
        primaryDataTable.addColumn({ type: 'string' , role: 'tooltip', p : {html:true}});
        primaryDataTable.addColumn({ type: 'date' , id: 'Start' });
        primaryDataTable.addColumn({ type: 'date' , id: 'End' });
        primaryDataTable.addRows([
          [ 'labor1', 'WO-1001' , '<b>Test</b>', new Date(2019, 3, 4), new Date(2019, 3, 5) ],
          [ 'labor1', 'WO-1002' , '<b>Test123</b>', new Date(2019, 3, 5),  new Date(2019, 3, 7) ],
          [ 'labor2', 'WO-2001' , '<i>Test123</i>', new Date(2019, 3, 4),  new Date(2019, 3, 5) ]

          ]);

         var primaryOptions = {
            title : 'Labor Assignment',
            tooltip: {isHtml: true },
            legend: 'none'
         }


        chart.draw(primaryDataTable, primaryOptions);
        google.visualization.events.addListener(chart, 'select', myClickHandler);
      }

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

  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 + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}


    </script>
  </head>
  <body>
  <td><div id="timeline" style="height: 380px; width: 900px"></div></td>
  </body>
  </html>

从时间轴图表触发事件

0 个答案: