Question

我正在分析谷歌时间线图表，以完成与我的项目相关的一些任务。我拿了像这样的示例代码

<html>
<body>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">

google.setOnLoadCallback(drawChart);
function drawChart() {

  var container = document.getElementById('example3.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Position' });
  dataTable.addcolumn({ type: 'string', id: 'Section'});
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'President','section1',          'George Washington', new Date(1789, 3, 29), new Date(1797, 2, 3)],
    [ 'President','section1',          'John Adams',        new Date(1797, 2, 3),  new Date(1801, 2, 3)],
    [ 'President',         'section1', 'Thomas Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3)],
    [ 'Vice President', 'section1',    'John Adams',        new Date(1789, 3, 20), new Date(1797, 2, 3)],
    [ 'Secretary of State','section1', 'Levi Lincoln',      new Date(1801, 2, 4),  new Date(1801, 4, 0)],
    [ 'Secretary of State','section1', 'James Madison',     new Date(1801, 4, 1),  new Date(1809, 2, 2)]]);

  chart.draw(dataTable);
}
</script>

<div id="example3.1" style="width: 1000px; height: 200px;"></div>
</body>
</html>

在上面的示例中，我添加了一个额外的列

dataTable.addcolumn({ type: 'string', id: 'Section'});

在谷歌时间线图表的给定示例中。

但是当我使用这个额外的列调试此示例时，它显示错误

未捕获类型错误undefined不是函数

我不知道如何解决这个问题。需要快速解决这个问题。我是google时间线图表的新手，也是jQuery的新手。

Answer 1

我花了5分钟让它工作，但还有15分钟才能理解为什么它不起作用。这是一个非常小的错误，但你有addcolumn而不是addColumn（c而不是C）。纠正这一点，它不应该在该行上给出错误。仍然会抛出Invalid data table format: must have 3 or 4 data columns，因为TimeLine的预期数据是4行

Answer 2

Google时间线不允许额外的列。如果省略条形标签，则只允许3列;如果包含条形标签，则只允许4列。

Answer 3

我发现有可能在TimeLine图表中添加更多信息

dataTable.addColumn({ type: 'string', role: 'tooltip' });

此列中的每个单元格，您以这样的方式编程，它将具有多列值。

使用handler事件来执行JavaScript以获取适当的信息。

如果您需要更多信息，请让我详细解释一下。

Answer 4

您需要dummy列。

替换：

dataTable.addcolumn({ type: 'string', id: 'Section'});

使用：

dataTable.addColumn({ type: 'string', id: 'dummy bar label' });

Answer 5

就像这里的某人所说：您可以使用角色：'tooltip'来克服限制，并在时间轴上有一个ID，如下所示：

function drawChart() {
    // Define the chart to be drawn.
    var data = new google.visualization.DataTable();

    data.addColumn({ type: 'string', id: 'Date' });
    data.addColumn({ type: 'string', id: 'Name' });
    data.addColumn({ type: 'date', id: 'Start' });
    data.addColumn({ type: 'date', id: 'End' });
    data.addColumn({ type: 'number', role: 'tooltip', id: 'Id' }); //THIS IS THE EXTRA LINE - NOTE THE ROLE TYPE

    data.addRows([<?=$js;?>]);

    var options = {      
      colors: ['#0033cc', '#FFD700', '#FF7A00', '#319899', '#3FCA00', '#C20073']
    };

    // Instantiate and draw the chart.
    var chart = new google.visualization.Timeline(document.getElementById('container'));
    chart.draw(data, options);

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

    function selectHandler(e) {
        var selection = chart.getSelection();
        if (selection.length > 0) {
            console.log(data.getValue(selection[0].row, 4)); // THIS IS HOW YOU READ IT
        }
    }

}

我正在尝试将列添加到谷歌时间线图表

5 个答案: