谷歌时间轴可视化中的垂直参考线 [英] 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屋!