JavaScript大型線形圖

 

這個演示程序屬於LightningChart JS的例子集,是JavaScript的數據可視化庫。 

 

 

LightningChart JS是完全由GPU加速和性能優化的圖表庫,用於展示大量的數據。它提供了一種簡單的方法來創建複雜和互動的圖表,並將其添加到你的網站或網絡應用中。 

 

該演示可以作爲一個例子或種子項目使用。本地執行需要以下步驟。 

 

 

確保已經安裝了相關版本的Node.js 

 

在終端中打開項目文件夾。 

 

  npm install              # fetches dependencies 

  npm start                # builds an application and starts the development server 

 

該應用程序在瀏覽器中可以使用http://localhost:8080,webpack-dev-server提供熱重載功能。 

 

說明 

這個例子展示了一個相對較大的數據集(幾百萬個數據點)的線形圖的可視化。 

 

LightningChart JS爲網絡中的數據可視化創造了一場革命--以前,線形圖的可視化只可能在幾十萬個數據點的範圍內實現,即使如此,也需要複雜的開發者努力來實現任何令人滿意的縮放或平移互動。 

 

 

有了LC JS,一百萬點的折線圖可以在一秒鐘內加載完畢,其結果是前所未有的--縮放和平移等操作都是即時的。 

 

此外,與以前的替代品相比,使用方法簡單得令人髮指。使用基於SVG/Canvas的繪圖,用戶在處理大量數據時將受到嚴重限制,因爲這些技術不能很好地擴展。 

 

下面是用LC JS創建一百萬點線圖的簡單過程。: 

 

const chart = lightningChart().ChartXY() 

const series = chart.addLineSeries({ 

    dataPattern: { 

        pattern: 'ProgressiveX' 

    } 

}) 

    .setStrokeStyle(stroke => stroke.setThickness(1)) 

    .addArrayY(new Array(1000000).fill().map(_ => Math.random())) 

 

這需要大約100毫秒的時間來加載,並將立即以閃電般的速度進行互動! 

 

 

線形圖的最大可能大小與使用的硬件,特別是RAM(內存)和GPU(顯卡)有很好的比例關係 - 在普通的辦公電腦上,LC J S可以處理超過一億個數據點。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章