Javascript 我正试图在谷歌时间线图中添加一列_Javascript_Jquery_Google Visualization

Javascript 我正试图在谷歌时间线图中添加一列

javascript jquery google-visualization

Javascript 我正试图在谷歌时间线图中添加一列,javascript,jquery,google-visualization,Javascript,Jquery,Google Visualization,我在分析谷歌的时间线图，做一些与我的项目相关的任务。我采用了如下的示例代码 <html> <body> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization', 'version':'1','packages':['timeline']}]}"></script> <

我在分析谷歌的时间线图，做一些与我的项目相关的任务。我采用了如下的示例代码

<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>

在谷歌时间线图上给出的示例中

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

未捕获类型错误未定义不是函数

我不知道如何解决这个问题。需要快速解决这个问题。我不熟悉谷歌时间线图表，也不熟悉jQuery。

我花了5分钟让它工作，但又花了15分钟来理解为什么它不工作。这是一个非常小的错误，但是您使用addcolumn而不是addcolumn（c而不是c）。更正该错误，则该行上不应出现错误。仍然会抛出一个无效的数据表格式：必须有3或4个数据列，因为时间线的预期数据是4行

谷歌时间线不允许额外的列。如果省略条形图标签，则只允许使用3列，如果包含条形图标签，则只允许使用4列。

我认为可以在时间线图表中添加更多信息

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

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

并使用处理程序事件执行JavaScript以获取适当的信息

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

您需要一个

虚拟列
替换：
dataTable.addcolumn({ type: 'string', id: 'Section'});

与：
就像这里有人说的：你可以使用角色：“工具提示”来克服限制，在你的时间线上有一个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
        }
    }

}

函数绘图图（）{
//定义要绘制的图表。
var data=new google.visualization.DataTable（）；
addColumn（{type:'string'，id:'Date'}）；
addColumn（{type:'string'，id:'Name'}）；
addColumn（{type:'date'，id:'Start'}）；
addColumn（{type:'date'，id:'End'}）；
data.addColumn（{type:'number'，role:'tooltip'，id:'id'}）；//这是额外的一行-注意角色类型
data.addRows（[]）；
变量选项={
颜色：['0033cc'、'FFD700'、'FF7A00'、'319899'、'3FCA00'、'C20073']
};
//实例化并绘制图表。
var chart=newgoogle.visualization.Timeline（document.getElementById（'container'）；
图表绘制（数据、选项）；
google.visualization.events.addListener（图表'select'，selectHandler）；
函数selectHandler（e）{
var selection=chart.getSelection（）；
如果（selection.length>0）{
console.log（data.getValue（选择[0]。行，4））；//这是您读取它的方式
}
}
}
谢谢你犯了个愚蠢的错误。但是您能告诉我如何像在中的数组一样一次在add行中传递数据吗this@RanjeetSIngh什么意思？传递数据的工作方式与您目前的工作方式相同，只是图表上不能有5行数据
dataTable.addColumn({ type: 'string', id: 'dummy bar label' });

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
        }
    }

}