谷歌時間軸可視化中的垂直參考線

您好我正在使用谷歌可視化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>

預期的結果：綠線代表當前日期 enter image description here

編輯：

如果這是不可能的，請提出任何其他的API，它可以實現這一點。

來源

2014-02-19 wishchaser

即使在2年後，謝謝大家的寶貴意見。從長遠來看，這將有助於很多人。 – wishchaser

在域（日期）列上使用「註釋」角色列。在圖表選項中，設置annotation.<annotation column index>.style選項'line'：

function drawVisualization() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Date', {role: 'annotation'}, 'Value'], 
     [new Date(2014, 1, 10), null, 5], 
     [new Date(2014, 1, 11), null, 4], 
     [new Date(2014, 1, 12), null, 3], 
     [new Date(2014, 1, 13), null, 7], 
     [new Date(2014, 1, 14), null, 5], 
     [new Date(2014, 1, 15), null, 6], 
     [new Date(2014, 1, 16), null, 9], 
     [new Date(2014, 1, 17), null, 2], 
     [new Date(2014, 1, 18), null, 2], 
     [new Date(2014, 1, 19), 'Today', 4], 
     [new Date(2014, 1, 20), null, 6], 
     [new Date(2014, 1, 22), null, 5], 
     [new Date(2014, 1, 23), null, 8], 
     [new Date(2014, 1, 24), null, 8] 
    ]); 

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); 
    chart.draw(data, { 
     width: 500, 
     height: 400, 
     annotation: { 
      1: { 
       style: 'line' 
      } 
     } 
    }); 
} 
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualization});

看到這裏的例子：http://jsfiddle.net/asgallant/r37uf/

來源

2014-02-19 23:06:06 asgallant

感謝您的回覆。其實我想要的是你所展示的。除此之外，我希望它在我所包含的圖表中。請告訴我如何在包含的時間表中獲得相同的結果。謝謝。 – wishchaser

時間軸圖表中不支持註釋，所以你不能這樣做，對不起。 – asgallant

我有同樣的問題我自己，無法在網絡上找到任何東西（儘管它可能確實存在）和我通過將垂直線的形狀重疊浮動div來解決此問題，其相對位置如下：

時間線圖的寬度（減去行標籤寬度）與最小值最大日期顯示在圖表上。假設今天的日期將介於最小 - 最大日期之間，則比率(today - min date)/(max date - min date)等於比率(current date line position)/(chart width - label width)。問題是，除非你能以某種方式將標籤寬度設置爲一個特定的數字（然後你可以使用它來計算有效的圖表寬度），那麼你將最終得到一個「移位」的今天行。

（而標籤寬度保持不變，但一致的），我無法找到如何設置行標籤寬度（在此不勝感激任何幫助），所以我今天的線位置是近似的...任何

希望這可以幫助，尼古拉斯

來源

2014-03-01 09:42:35 user3367842

謝謝你的解決方案尼古拉斯。我會試試看，稍後再回來。對於你的問題，如果標籤不是很重要，你可以使用'showRowLabels'選項隱藏它。 – wishchaser

順便說一句，你是如何設定最小和最大日期的？我嘗試使用'hAxis.viewWindow.min'和'hAxis.viewWindow.max'。他們似乎沒有在這些圖表中工作。 – wishchaser

創建第一個任務來表示當前日期：

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

結果：

enter image description here

來源：Viviendo en la Era de la Web 2.0

來源

2014-10-02 21:25:18 jpussacq

我只是稍作調整，正如他的博客文章所述。 – Scott

簡單的CSS等價物：'rect [fill =「＃A6373C」] {height：100％; }' – Vivien

我發現了一個視頻9月份2016年，加入垂直線的時間表圖表。https://www.youtube.com/watch?v=sG9tB04aaqE&t=416s

它還包括在視頻（https://jsfiddle.net/k5se146d/1/）

但紅線例如，當鼠標懸停事件觸發可能會消失。我試圖在函數中添加下面的行。它似乎是時間線圖上的黑客攻擊，但我在Google上找不到任何結果。希望它可以幫助任何人需要。

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

     }); 
}

來源

2016-12-13 03:45:36

來計算日期標記的放置，
找到開始和時間軸
使用數據表的方法的結束日期 - >getColumnRange()

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

然後劃分的寬度圖表以毫秒爲單位的差異
將結果乘以開始日期和標記日期的差異

找到的第一個'path'元件是分離的行標籤和時間軸，
這可用於抵消行的寬度標籤

見下列工作片段中的線...

google.charts.load('current', { 
 
    packages:['timeline'] 
 
}).then(function() { 
 
    var container = document.getElementById('timeline'); 
 
    var chart = new google.visualization.Timeline(container); 
 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn({type: 'string', id: 'Row'}); 
 
    dataTable.addColumn({type: 'string', id: 'Bar'}); 
 
    dataTable.addColumn({type: 'date', id: 'Start'}); 
 
    dataTable.addColumn({type: 'date', id: 'End'}); 
 
    var currentYear = (new Date()).getFullYear(); // keep example current 
 
    dataTable.addRows([ 
 
    ['Row 1', 'A-1', new Date(currentYear, 0, 1), new Date(currentYear, 2, 31)], 
 
    ['Row 1', 'A-2', new Date(currentYear, 3, 1), new Date(currentYear, 5, 30)], 
 
    ['Row 2', 'B-1', new Date(currentYear, 6, 1), new Date(currentYear, 8, 31)], 
 
    ['Row 2', 'B-2', new Date(currentYear, 9, 1), new Date(currentYear, 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({ 
 
    pattern: 'MM/dd/yyyy' 
 
    }); 
 
    var rowHeight = 44; 
 
    var options = { 
 
    height: (dataTableGroup.getNumberOfRows() * rowHeight) + rowHeight 
 
    }; 
 

 
    function drawChart() { 
 
    chart.draw(dataTable, options); 
 
    } 
 

 
    function addMarker(markerDate) { 
 
    var baseline; 
 
    var baselineBounds; 
 
    var chartElements; 
 
    var markerLabel; 
 
    var markerLine; 
 
    var markerSpan; 
 
    var svg; 
 
    var timeline; 
 
    var timelineUnit; 
 
    var timelineWidth; 
 
    var timespan; 
 

 
    baseline = null; 
 
    timeline = null; 
 
    svg = null; 
 
    markerLabel = null; 
 
    chartElements = container.getElementsByTagName('svg'); 
 
    if (chartElements.length > 0) { 
 
     svg = chartElements[0]; 
 
    } 
 
    chartElements = container.getElementsByTagName('rect'); 
 
    if (chartElements.length > 0) { 
 
     timeline = chartElements[0]; 
 
    } 
 
    chartElements = container.getElementsByTagName('path'); 
 
    if (chartElements.length > 0) { 
 
     baseline = chartElements[0]; 
 
    } 
 
    chartElements = container.getElementsByTagName('text'); 
 
    if (chartElements.length > 0) { 
 
     markerLabel = chartElements[0].cloneNode(true); 
 
    } 
 
    if ((svg === null) || (timeline === null) || (baseline === null) || (markerLabel === null) || 
 
     (markerDate.getTime() < dateRangeStart.min.getTime()) || 
 
     (markerDate.getTime() > dateRangeEnd.max.getTime())) { 
 
     return; 
 
    } 
 

 
    // calculate placement 
 
    timelineWidth = parseFloat(timeline.getAttribute('width')); 
 
    baselineBounds = baseline.getBBox(); 
 
    timespan = dateRangeEnd.max.getTime() - dateRangeStart.min.getTime(); 
 
    timelineUnit = (timelineWidth - baselineBounds.x)/timespan; 
 
    markerSpan = markerDate.getTime() - dateRangeStart.min.getTime(); 
 

 
    // add label 
 
    markerLabel.setAttribute('fill', '#e91e63'); 
 
    markerLabel.setAttribute('y', options.height); 
 
    markerLabel.setAttribute('x', (baselineBounds.x + (timelineUnit * markerSpan) - 4)); 
 
    markerLabel.textContent = formatDate.formatValue(markerDate); 
 
    svg.appendChild(markerLabel); 
 

 
    // add line 
 
    markerLine = timeline.cloneNode(true); 
 
    markerLine.setAttribute('y', 0); 
 
    markerLine.setAttribute('x', (baselineBounds.x + (timelineUnit * markerSpan))); 
 
    markerLine.setAttribute('height', options.height); 
 
    markerLine.setAttribute('width', 1); 
 
    markerLine.setAttribute('stroke', 'none'); 
 
    markerLine.setAttribute('stroke-width', '0'); 
 
    markerLine.setAttribute('fill', '#e91e63'); 
 
    svg.appendChild(markerLine); 
 
    } 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    // add marker for current date 
 
    addMarker(new Date()); 
 
    }); 
 

 
    window.addEventListener('resize', drawChart, false); 
 
    drawChart(); 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="timeline"></div>

來源

2018-01-29 20:44:01 WhiteHat

希望這可以幫助... – WhiteHat

谷歌時間軸可視化中的垂直參考線

回答

相關問題