Google api google时间轴可视化中的垂直参考线

您好，我正在使用谷歌可视化api在我的网站上绘制时间线图。它很好用。但是有一件小事情困扰着我。我想在图表区域中显示一条垂直线来表示当前日期。请告诉我任何解决方案

我的代码：

<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: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'President',          'George Washington', new Date(2014, 3, 29), new Date(2014, 4, 3)],
    [ 'President',          'John Adams',        new Date(2014, 2, 3),  new Date(2014, 3, 3)],
    [ 'President',          'Thomas Jefferson',  new Date(2014, 2, 3),  new Date(2014, 5, 3)],
    [ 'Vice President',     'John Adams',        new Date(2014, 3, 20), new Date(2014, 5, 3)],
    [ 'Vice President',     'Thomas Jefferson',  new Date(2014, 2, 3),  new Date(2014, 6, 3)],
    [ 'Vice President',     'Aaron Burr',        new Date(2014, 2, 3),  new Date(2014, 2, 3)],
    [ 'Vice President',     'George Clinton',    new Date(2014, 2, 3),  new Date(2014, 2, 19)],

    ]);

  chart.draw(dataTable);
}

</script>

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

setOnLoadCallback（drawChart）；
函数绘图图（）{
var container=document.getElementById（'example3.1'）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
addColumn（{type:'string'，id:'Position'}）；
addColumn（{type:'string'，id:'Name'}）；
addColumn（{type:'date'，id:'Start'}）；
addColumn（{type:'date'，id:'End'}）；
dataTable.addRows([
[“总统”，“乔治·华盛顿”，新日期（2014年3月29日），新日期（2014年4月3日）]，
[‘总统’、‘约翰·亚当斯’、新日期（2014年2月3日）、新日期（2014年3月3日）]，
[“总统”，“托马斯·杰斐逊”，新日期（2014年2月3日），新日期（2014年5月3日）]，
[“副总统”，“约翰·亚当斯”，新日期（2014年3月20日），新日期（2014年5月3日）]，
[“副总统”，“托马斯·杰斐逊”，新日期（2014年2月3日），新日期（2014年6月3日）]，
[‘副总裁’、‘艾伦·伯尔’、新日期（2014年2月3日）、新日期（2014年2月3日）]，
[‘副总统’、‘乔治·克林顿’、新日期（2014年2月3日）、新日期（2014年2月19日）]，
]);
图表绘制（数据表）；
}

预期结果：绿线表示当前日期

编辑：

---

如果这是不可能的，请建议可以实现这一点的任何其他API。

使用域（日期）列上的“注释”角色列。在图表选项中，设置

注释。
我自己也有同样的问题，在网上找不到任何东西（尽管它可能确实存在），我通过将一个浮动div叠加在一条垂直线的形状上解决了这个问题，该垂直线的相对位置如下：

时间线图表的宽度（减去行标签宽度）与图表上显示的最小-最大日期之间的差异有关。假设今天的日期介于最小-最大日期之间，则比率
（今天-最小日期）/（最大日期-最小日期）
等于比率
（当前日期行位置）/（图表宽度-标签宽度）
。
问题是，除非你能以某种方式将标签宽度设置为一个特定的数字（然后你可以用这个数字来计算有效的图表宽度），否则今天你将得到一条“移位”的线

我找不到任何关于如何设置行标签宽度的信息（非常感谢您的帮助），所以我今天的行位置是近似的。。。（但标签宽度保持不变时保持一致）

希望这有帮助，
Nikolas创建第一个任务来表示当前日期：

      dataTable.addRows([
['', 'Hoy', new Date(2014,9,2), new Date(2014,9,2) ],

使用jQuery创建函数以延长此任务的时间：

function MarcarHoy (div, filas){
  $('#'+div+' text:contains("Hoy")').css('font-size','11px').attr('fill','#A6373C').prev().first().attr('height',filas*41+'px').attr('width','1px').attr('y','0');
  }

调用函数：

    chart.draw(dataTable, options);
  MarcarHoy('example1',23);
  google.visualization.events.addListener(chart, 'onmouseover', function(obj) {
    MarcarHoy('example1');
    });
}

结果是：


来源：
我在2016年9月发现了一段视频，内容是关于在时间线图表中添加垂直线

它还包括视频中的示例（）

但当鼠标悬停事件触发时，红线可能会消失。我试图在函数中添加以下行。这似乎是对时间线图的攻击，但我在谷歌上没有发现任何结果。希望它能帮助任何需要帮助的人

function nowLine(div){

//get the height of the timeline div
    var height;
  $('#' + div + ' rect').each(function(index){
    var x = parseFloat($(this).attr('x'));
    var y = parseFloat($(this).attr('y'));

    if(x == 0 && y == 0) {height = parseFloat($(this).attr('height'))}
  })

    var nowWord = $('#' + div + ' text:contains("Now")');

  nowWord.prev().first().attr('height', height + 'px').attr('width', '1px').attr('y', '0');
// add this line to remove the display:none style on the vertical line
        $('#' + div + '  text:contains("Now")').each(function(idx, value) {
            if (idx == 0) {
                $(value).parent().find("rect").first().removeAttr("style");
            } else if (idx == 1) {
                $(value).parent().find("rect").first().attr("style", "display:none;");
            }

        });
}

要计算日期标记的位置，

查找时间线的开始和结束日期

使用数据表方法-->
getColumnRange（）

然后将图表的宽度除以以毫秒为单位的差值

将结果乘以开始日期和标记日期之差

找到的第一个
'path'
元素是分隔行标签和时间线的行，

这可用于偏移行标签的宽度

请参阅以下工作片段


google.charts.load（'current'{
软件包：[“时间线”]
}).然后（函数（）{
var container=document.getElementById（'timeline'）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
addColumn（{type:'string'，id:'Row'}）；
addColumn（{type:'string'，id:'Bar'}）；
addColumn（{type:'date'，id:'Start'}）；
addColumn（{type:'date'，id:'End'}）；
var currentYear=（new Date（））.getFullYear（）；//保持示例最新
dataTable.addRows([
[“第1行”，“A-1”，新日期（当前年份，0，1），新日期（当前年份，2，31）]，
['第1行'，'A-2'，新日期（当前年份，3，1），新日期（当前年份，5，30）]，
[“第2行”，“B-1”，新日期（本年度，6，1），新日期（本年度，8，31）]，
[‘第2行’、‘B-2’、新日期（当前年份，9,1）、新日期（当前年份，11,31）]
]);
var dataTableGroup=google.visualization.data.group（dataTable[0]）；
var dateRangeStart=dataTable.getColumnRange（2）；
var dateRangeEnd=dataTable.getColumnRange（3）；
var formatDate=new google.visualization.DateFormat({
模式：“MM/dd/yyyy”
});
var行高=44；
变量选项={
高度：（dataTableGroup.getNumberOfRows（）*rowHeight）+rowHeight
};
函数绘图图（）{
图表绘制（数据表、选项）；
}
函数addMarker（markerDate）{
var基线；
var基线边界；
风险价值要素；
var-markerLabel；
var-markerLine；
var-markerSpan；
var-svg；
var时间线；
var时间线单位；
var时间线宽度；
var时间跨度；
基线=零；
时间线=空；
svg=null；
markerLabel=null；
chartElements=container.getElementsByTagName（'svg'）；
如果（chartElements.length>0）{
svg=图表元素[0]；
}
chartElements=container.getElementsByTagName（'rect'）；
如果（chartElements.length>0）{
时间线=图表元素[0]；
}
chartElements=container.getElementsByTagName（'path'）；
如果（chartElements.length>0）{
function nowLine(div){

//get the height of the timeline div
    var height;
  $('#' + div + ' rect').each(function(index){
    var x = parseFloat($(this).attr('x'));
    var y = parseFloat($(this).attr('y'));

    if(x == 0 && y == 0) {height = parseFloat($(this).attr('height'))}
  })

    var nowWord = $('#' + div + ' text:contains("Now")');

  nowWord.prev().first().attr('height', height + 'px').attr('width', '1px').attr('y', '0');
// add this line to remove the display:none style on the vertical line
        $('#' + div + '  text:contains("Now")').each(function(idx, value) {
            if (idx == 0) {
                $(value).parent().find("rect").first().removeAttr("style");
            } else if (idx == 1) {
                $(value).parent().find("rect").first().attr("style", "display:none;");
            }

        });
}

var dateRangeStart = dataTable.getColumnRange(2);
var dateRangeEnd = dataTable.getColumnRange(3);