Question

以下是2个谷歌图表代码示例。最后一个例子的唯一区别是开始秒。有没有人知道，为什么我在上一个例子中得到“无法读取'属性'长度'？此外，如果我将第2行和第3行的名称从“第二个测试条目编号2”缩短为更短，则会显示图表。

      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 dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Group' });
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

         dataTable.addRows([
['First', null, new Date(2017,1,15, 22, 40, 27), new Date(2017,10,29, 23, 59, 59)],
['Second Test entry number 2', null, new Date(2017,8,4, 0, 0, 0), new Date(2018,0,16, 23, 59, 59)],
['Second Test entry number 2', null, new Date(2018,0,25, 0, 0, 0), new Date(2018,1,06, 23, 59, 59)]
]);


        chart.draw(dataTable);
      }

第二个不起作用的示例https://jsfiddle.net/ypz095g9/：

      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 dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Group' });
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

         dataTable.addRows([
['First', null, new Date(2017,1,15, 22, 40, 26), new Date(2017,10,29, 23, 59, 59)],
['Second Test entry number 2', null, new Date(2017,8,4, 0, 0, 0), new Date(2018,0,16, 23, 59, 59)],
['Second Test entry number 2', null, new Date(2018,0,25, 0, 0, 0), new Date(2018,1,06, 23, 59, 59)]
]);


        chart.draw(dataTable);
      }

我在这里绝望了。希望有人可以帮助解决这个问题。谢谢。

Answer 1

看起来像addRows

的问题

当整个列只有null值时，会发生奇怪的事情（该代码实际上适用于我 as-is 在chrome中）

'Role'列是可选的，您可以将其删除...
请参阅以下工作代码段...

＆＃13;

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 dataTable = new google.visualization.DataTable();

dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });

     dataTable.addRows([
['First', new Date(2017,1,15, 22, 40, 26), new Date(2017,10,29, 23, 59, 59)],
['Second Test entry number 2', new Date(2017,8,4, 0, 0, 0), new Date(2018,0,16, 23, 59, 59)],
['Second Test entry number 2', new Date(2018,0,25, 0, 0, 0), new Date(2018,1,06, 23, 59, 59)]
]);


    chart.draw(dataTable);
  }

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

＆＃13;

或使用空白字符串''代替......

＆＃13;

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 dataTable = new google.visualization.DataTable();

dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });

     dataTable.addRows([
['First', '', new Date(2017,1,15, 22, 40, 26), new Date(2017,10,29, 23, 59, 59)],
['Second Test entry number 2', '', new Date(2017,8,4, 0, 0, 0), new Date(2018,0,16, 23, 59, 59)],
['Second Test entry number 2', '', new Date(2018,0,25, 0, 0, 0), new Date(2018,1,06, 23, 59, 59)]
]);


    chart.draw(dataTable);
  }

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

＆＃13;

谷歌图表时间轴 - 无法读取属性长度为null

1 个答案: