谷歌时间轴可视化中的垂直参考线 [英] vertical reference line in google timeline visualization

问题描述

您好我正在使用Google可视化api在我的网站上绘制时间表图表。它工作得很好。但有一件小事让我烦恼。我想在图表区域中显示一条垂直线来表示当前日期。请让我知道任何类型的解决方案。

我的代码：

 < script type =text / javascriptsrc =https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1' '包'：[ '时间轴']}]}>< /脚本> 
 
< script type =text / javascript> 
 google.setOnLoadCallback（drawChart）; 
函数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）]，
 [总统'，'约翰亚当斯'，新日期（2014,2,3），新日期（2014,3,3）]，
 ['President'，'Thomas Jefferson'，新日期（2014,2,3） 3），新日期（2014,5,3）]，
 ['副主席'，'约翰亚当斯'，新日期（2014,3,20），新日期（2014,5,3）]， 
 ['Vice President'，'Thomas Jefferson'，新日期（2014,2,3），新日期（2014,6,3）]，
 ['Vice President'，'Aaron Burr' ，新日期（2014,2,3），新日期（2014,2,3）]，
 ['副总统'，'乔治克林顿'，新日期（2014,2,3），新日期2014，2，19）]，
 
]）; 
 
 chart.draw（dataTable）; 
} 
 
< / script> 
 
< div id =example3.1style =width：1000px; height：200px;>< / div> 
  

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

编辑：

如果这是不可能的，请推荐任何可以实现此功能的API。 解决方案

创建第一个任务来表示当前日期：

  dataTable.addRows（[
 [''，'Hoy'，new Date（2014,9 ，2），new Date（2014,9,2）]，
  

用jQuery创建一个函数

 函数MarcarHoy（div，filas）{
 $（'＃'+ div +'text ：含有（ Hoy的）字体大小， '11像素'）ATTR（ '填充'， '＃A6373C高度 'filas '）的CSS（''）分组（）第一（）ATTR（。' attr（'y'，'0'）; 
} 
  

调用函数：

  chart.draw（dataTable，option s）; 
 MarcarHoy（'example1'，23）; 
 google.visualization.events.addListener（chart，'onmouseover'，function（obj）{
 MarcarHoy（'example1'）; 
}）; 
 
 $ / code> 

结果：







来源：< a href =http://viviendoenlaeradelaweb20.blogspot.com.ar/2014/10/agregar-fecha-actual-al-grafico.html =noreferrer> Viviendo en la Era de la Web 2.0

Hi I am using google visualization api to draw a timeline chart in my website. It works just fine. But there is one little thing that is bothering me. I want to display a vertical line in the chart area to represent the current date. Please let me know any kind of solutions.

My code:

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

Intended Result: Green Line represents current date

Edit:

If this is not possible, please suggest any other API which can achieve this.

解决方案

Create a first task to represent current date:

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

Create a function with jQuery to make this task longer:

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');
  }

Call the function:

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

The result:

Source: Viviendo en la Era de la Web 2.0

这篇关于谷歌时间轴可视化中的垂直参考线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！