31

Google的Annotated Timeline可視化API有其他選擇嗎?替代Google可視化的註釋時間線? (圖形庫)

enter image description here

There's some bugs in the Annotated Timeline,並沒有出現,他們將得到解決。

另外它是一個閃存基於圖表。 Canvas + Javascript實現將更加便攜。


,使該註解時間軸有價值的(相對於所有其他圖表庫我到目前爲止已找到)是素質:

  • 支持多條線路
  • 變焦;鑽進出日期範圍
  • 平移來回穿越時空的
  • 支持數千數據點進行對飛

據送入新的數據

  • 能力因爲我可以告訴Google的Annotated Timeline是唯一的交互式線圖庫。

  • +0

    也相關:http://stackoverflow.com/questions/2109780/non-clunky-client-side-graphs http://stackoverflow.com/questions/437686/is-there-a-client-side-javascript -graph-library-that-doesnt-require-a-server?rq = 1 – trante

    回答

    20

    Dygraphs應該做到你想要的,並且是一個完整的js實現。它是免費的,並且已經integrates with gvizsample here),所以你幾乎不需要改變任何東西。它還有其他一些gviz圖表上沒有的其他有用功能(如滾動平均計算)。

    希望有所幫助。

    +5

    對於它的價值,dygraphs也有一個範圍選擇器,就像Google註釋時間軸底部的那個一樣。它默認情況下不啓動,但可以輕鬆啓用。有關示例,請參閱http://dygraphs.com/tests/range-selector.html。 – danvk

    +0

    範圍選擇器是我正在尋找的。謝謝,@danvk –

    +0

    @danvk它值得很多。謝謝。 –

    1

    經過廣泛的研究取代谷歌註釋時間線,我認爲HighChart StockChart是最全面的。 如上所述,它不是開源或免費的,但根據我的負擔。

    2

    有在院子裏一個新的項目(是的,我的開發人員有一個),這可能是您的需求的完美契合:

    Data Visualization Software Lab

    這個庫是完全基於HTML5和非常互動 - 試試演示。它也是移動優化的,所以你可以在任何設備上使用它。

    圖書館目前處於測試階段和積極發展階段。還有更多功能即將推出。任何反饋將被強烈建議。還有大量的文檔和使用示例。外部控制API也存在。

    雙重授權提供。

    快照:

    TimeChart example

    1

    嘗試NVD3.js如果你不需要註釋,但只有取景功能。

    3

    January 29, 2014谷歌提供了一個名爲Annotation Chart的圖表的新版本。確實很酷!最重要的是,無論用戶身在何處,它都是免費的。

    註解圖表是交互式時間序列折線圖,支持 註釋。與使用Flash的註釋時間軸不同, 註釋圖表爲SVG/VML,並且只要有可能,就應該首選 。

    樣品:

    <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> 
    
    +0

    謝謝你回來添加這個答案,我一直希望這個替代方案被釋放! – nbrooks

    +0

    與我一直使用的其他谷歌圖表相比,這一個似乎是一大堆問題...... – Michael

    0

    嘗試c3js 。其完全免費的,重量輕,使用方便。