vertikale Referenzlinie in Google Timeline Visualisierung

Question

Hallo ich benutze Google Visualisierung API, um ein Timeline-Diagramm in meiner Website zu zeichnen. Es funktioniert gut. Aber da ist eine kleine Sache, die mich stört. Ich möchte eine vertikale Linie im Diagrammbereich anzeigen, um das aktuelle Datum darzustellen. Bitte lassen Sie mich jede Art von Lösungen wissen.

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

beabsichtigtes Ergebnis: Grüne Linie stellt das aktuelle Datum

Edit:

Wenn dies nicht möglich ist, bitte irgendeine andere API vorschlagen, die dies erreichen können.

Answer 1

Verwenden Sie eine Rollenspalte "Annotation" in der Spalte domain (date). In den Diagrammoptionen, setzt die annotation.<annotation column index>.style Option '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}); 

siehe Beispiel hier: http://jsfiddle.net/asgallant/r37uf/

Answer 2

ich das gleiche Problem selbst hatte, nichts im Internet finden könnte (obwohl es existieren kann) und Ich habe die Sache gelöst, indem ich ein schwebendes div in Form einer vertikalen Linie überlagert habe, die wie folgt positioniert ist:

Die Breite des Zeitstrahldiagramms (abzüglich der Breite der Reihenbeschriftung) bezieht sich auf die Differenz zwischen der min -max Daten auf dem Diagramm angezeigt. Unter der Annahme, dass das heutige Datum irgendwo zwischen den Min-Max-Daten liegt, entspricht das Verhältnis (today - min date)/(max date - min date) dem Verhältnis (current date line position)/(chart width - label width). Der Catch ist, dass Sie, wenn Sie die Etikettenbreite nicht auf eine bestimmte Zahl festlegen können (die Sie dann verwenden können, um die effektive Diagrammbreite zu berechnen), mit einer "verschobenen" heutigen Zeile enden.

Ich kann nichts finden, wie die Zeile Etikettenbreite einzustellen (jede Hilfe zu diesem Thema sehr geschätzt), so ist meine heute Linienposition annähernd ... (aber konsistent, während die Etikettenbreite unverändert bleibt)

Hoffnung Erstelle hilft, Nikolas

Answer 3

eine erste Aufgabe aktuelles Datum dar:

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

eine Funktion mit jQuery erstellen, diese Aufgabe zu machen länger:

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

Rufen Sie die Funktion:

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

Das Ergebnis:

Quelle: Viviendo en la Era de la Web 2.0

Answer 4

ich ein Video in September 2016 über das Hinzufügen der vertikalen Linie in der gefunden Zeitachse-Diagramm.https://www.youtube.com/watch?v=sG9tB04aaqE&t=416s

Es enthielt auch das Beispiel im Video (https://jsfiddle.net/k5se146d/1/)

Aber die rote Linie verschwunden, wenn das Ereignis ausgelöst Mouseover werden kann. Ich habe versucht, die folgende Zeile in der Funktion hinzuzufügen. Es scheint ein Hacker auf der Zeitleiste zu sein, aber ich habe kein Ergebnis auf Google gefunden. Ich hoffe, es kann jedem helfen, der es braucht.

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

     }); 
} 

Answer 5

die Platzierung des Datumsmarke zu berechnen,
die Daten der Methode Timeline
Verwendung Datentabelle beginnen und Ende finden ->getColumnRange()

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

dann teilen Sie die Breite des Diagramm mit dem Unterschied in Millisekunden
multiplizieren Sie das Ergebnis mit der Differenz von Startdatum und Datum der Markierung

'path' das erste Element gefunden ist die Linie, die die Reihe Etiketten trennt und die Zeitleiste
dies verwendet wird, kann die Breite der Reihe zu versetzen Etikett

siehe folgenden Arbeits Schnipsel ...

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>