vertical reference line in google timeline-Visualisierung

Hallo, ich bin mit google visualization api zum zeichnen einer Zeitleiste in meiner website. Es funktioniert ganz gut. Aber es ist eine kleine Sache, die mich stört. Ich möchte die Anzeige einer vertikalen Linie im Diagramm Bereich um die Darstellung der aktuellen Datum. Bitte lassen Sie mich wissen, jede Art von Lösungen.

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>

Beabsichtigte Ergebnis: Grüne Linie stellt aktuelle Datum
vertical reference line in google timeline-Visualisierung

Edit:

Wenn dies nicht möglich ist, schlagen Sie bitte jede andere API, die das erreichen können.

Danke u an alle für Eure wertvollen inputs auch nach 2 Jahren. Dies wird helfen, eine Menge Menschen in der langfristig.

InformationsquelleAutor wishchaser | 2014-02-19

google-api google-visualization

Erstellen Sie eine erste Aufgabe darstellen Aktuelles Datum:

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

Erstellen Sie eine Funktion mit jQuery zu machen, dieser Aufgabe mehr:

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

Aufruf der Funktion:

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

Das Ergebnis:

vertical reference line in google timeline-Visualisierung

Quelle: Viviendo en la Era de la Web 2.0

Ich musste nur eine kleine Anpassung, wie in seinem blog-post.
Einfache CSS-äquivalent : rect[fill="#A6373C"]{ height: 100%; }

InformationsquelleAutor jpussacq

zur Berechnung der Platzierung der Datums-marker

finden Sie die begin-und end-Termine der timeline

verwenden Sie Daten-Tabelle-Methode --> getColumnRange()

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

dann teilen Sie die Breite des Diagramms, indem Sie die Differenz in Millisekunden

multiplizieren Sie das Ergebnis durch die Differenz von start-Datum und-Markierung Datum

den ersten 'path' element ist die Linie, die die Zeilenbeschriftungen und die timeline

dies kann verwendet werden, um offset die Breite der Zeile Etiketten

siehe folgende arbeiten snippet...

JS:

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

HTML:

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

InformationsquelleAutor WhiteHat

Ich ein video gefunden, im September 2016 zum hinzufügen der vertikalen Linie in der Zeitleiste. https://www.youtube.com/watch?v=sG9tB04aaqE&t=416s

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

Aber die rote Linie kann verschwunden sein, wenn das mouseover-Ereignis ausgelöst. Ich versuchte, fügen Sie die folgende Zeile in der Funktion. Es scheint ein hacken auf der Zeitleiste, aber ich fand kein Ergebnis auf der google. Hoffe es kann jemand helfen müssen.

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

        });
}

InformationsquelleAutor Long Ranger

Verwenden Sie eine "Anmerkung" Spalte "Rolle" auf der Domäne (Datum) Spalte. In der Diagramm-Optionen, setzen Sie 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/

Danke für die Antwort. Eigentlich will ich genau das, was u gezeigt haben. Außer, ich will es in dem Diagramm, das ich aufgenommen haben. Bitte sagen Sie mir, wie das gleiche Ergebnis zu erzielen in dieser Zeitleiste I enthalten. Danke.
Anmerkungen werden nicht unterstützt-Timeline-charts noch, so dass Sie dies nicht tun, sorry.

InformationsquelleAutor asgallant

0

Ich hatte das gleiche Problem selber nicht finden konnte im web nichts (obwohl es vielleicht nicht gibt) und ich habe eine Art gelöst, die Angelegenheit durch eine überlagerung einer schwebenden div-Element in der Form einer vertikalen Linie, die ist relativ positioniert, wie folgt:

Die Breite der Zeitleiste (minus die Reihe Etikettenbreite) bezieht sich auf die Differenz zwischen den min-max-Daten auf der Karte angezeigt. Unter der Annahme, dass das heutige Datum wird irgendwo zwischen der min-max-Daten, dann das Verhältnis (today - min date)/(max date - min date) entspricht dem Verhältnis (current date line position)/(chart width - label width).
Der Haken ist, dass es sei denn, man kann irgendwie einstellen das die Etikettenbreite an eine bestimmte Nummer (die Sie dann verwenden können, um die Berechnung der effektiven chart-Breite) werden Sie am Ende mit einem "verschoben" heute-Linie.

Konnte ich nichts finden, wie man die Reihe Etikettenbreite (jede Hilfe zu diesem sehr geschätzt), so meine heutige line-position ist die Ungefähre... (aber konsistent, während die label-Breite bleibt unverändert)

Hoffe, das hilft,
Nikolas
- Danke für diese Lösung, Nicholas. Ich werde versuchen Sie es und erhalten Sie später darauf zurück. Und für dein problem, wenn das Etikett ist nicht wirklich wichtig, Sie kann nur verstecken mit 'showRowLabels" - option.
- BTW, wie haben Sie es geschafft, legen Sie die min-und max-Daten? Ich habe versucht, mit hAxis.viewWindow.min und hAxis.viewWindow.max . Sie scheinen nicht zu funktionieren in diesen charts.
InformationsquelleAutor user3367842

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.