webentwicklung-frage-antwort-db.com.de

Alternative zur kommentierten Zeitleiste von Google Visualisierung? (grafische Bibliothek)

Gibt es eine Alternative zu der Visualisierungs-API Annotated Timeline von Google?

enter image description here

Es gibt einige Fehler in der kommentierten Zeitleiste , und es scheint nicht, dass sie behoben werden.

Es ist auch ein auf Flash basierendes Diagramm. Eine Canvas + Javascript-Implementierung wäre portabler.


Die Eigenschaften von Annotated Timeline sind wertvoll (im Gegensatz zu jeder anderen Chartbibliothek, die ich bisher gefunden habe):

  • unterstützt mehrere Zeilen
  • zoomen; in einen Datumsbereich hinein und aus ihm heraus zu bohren
  • durch die Zeit hin und her schwenken
  • unterstützttausendevon Datenpunkten
  • fähigkeit, neue Daten im laufenden Betrieb einzugeben

Soweit ich das beurteilen kann, handelt es sich bei Google Annotated Timeline um die einzige interaktive Liniendiagramm-Bibliothek.

31
Ian Boyd

Dygraphs sollte genau das tun, was Sie möchten, und ist eine vollständige js-Implementierung. Es ist kostenlos und bereits integriert sich in gviz ( sample here ), so dass Sie kaum etwas ändern müssen. Es hat auch eine Reihe anderer nützlicher Funktionen, die in anderen Gviz-Diagrammen nicht zu finden sind (wie die Berechnung des Rollendurchschnitts).

Hoffentlich hilft das.

20
oli

Ich weiß, dass diese Frage ziemlich alt ist, aber es würde mir viel Zeit sparen, wenn ich wüsste, dass es eine neue ChartRangeFilter api gibt.

enter image description here

https://google-developers.appspot.com/chart/interactive/docs/gallery/controls#chartrangefilter

5
headsvk

Am 29. Januar 2014 hat Google eine neue Version eines solchen Diagramms mit dem Namen Annotation Chart zur Verfügung gestellt. Es ist wirklich ziemlich cool! Am besten ist es kostenlos, wo immer Sie möchten.

Annotationsdiagramme sind interaktive Zeitreihendiagramme, die Annotationen unterstützen. Im Gegensatz zur kommentierten Zeitleiste, die Flash verwendet, sind Anmerkungsdiagramme SVG/VML und sollten bevorzugt werden, wenn Möglich ist.

Probe:

<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1.1', {'packages':['annotationchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
          [new Date(2314, 2, 15), 12400, undefined, undefined,
                                  10645, undefined, undefined],
          [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                                  12374, undefined, undefined],
          [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                                  15766, 'Gallantors', 'First Encounter'],
          [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                                  34334, 'Gallantors', 'Statement of shared principles'],
          [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                                  66467, 'Gallantors', 'Mysteries revealed'],
          [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                                  79463, 'Gallantors', 'Omniscience achieved']
        ]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true,
        };

        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id='chart_div' style='width: 900px; height: 500px;'></div>
  </body>
</html>
3

Ich bin gerade darauf gestoßen:

http://www.highcharts.com/demo/dynamic-master-detail

Es ist nicht kostenlos, aber es sieht interessant aus.

2
tooshel

Dieser Thread ist etwas alt, aber die SIMILE-Widgets von MIT sind großartig. Sie haben auch eine für die Timeline. SIMILE Timeline Widget

2
karlos

Es gibt ein neues Projekt auf dem Hof ​​(yep, ich bin einer der Entwickler dort), das möglicherweise perfekt auf Ihre Bedürfnisse abgestimmt ist:

Software-Labor für Datenvisualisierung

Diese Bibliothek ist rein HTML5-basiert und sehr interaktiv - probieren Sie die Demo. Es ist auch für Mobilgeräte optimiert, sodass Sie es auf jedem Gerät verwenden können.

Die Bibliothek befindet sich derzeit in der Beta-Phase und ist aktiv in der Entwicklung. Viele weitere Funktionen werden bald folgen. Jede Rückmeldung wäre sehr zu empfehlen. Es gibt auch eine umfangreiche Dokumentation und Anwendungsbeispiele. API für externe Kontrolle ist ebenfalls vorhanden.

Doppelte Lizenzierung muss bereitgestellt werden.

Schnappschuss:

TimeChart example

2
jancha

Nach umfangreichen Recherchen zum Ersetzen von Google Annotated Timeline denke ich, dass HighChart StockChart das umfassendste ist. Wie oben erwähnt, ist es weder Open Source noch kostenlos, aber nach meiner Meinung erschwinglich.

1
Go4It

Versuchen Sie NVD3.js , wenn Sie nicht die Anmerkung, sondern nur die Sucherfunktion benötigen.

1
yegle

Versuchen Sie c3js . Es ist völlig frei, leicht und einfach zu bedienen.

0
Ishu Madan