這個演示程序屬於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可以處理超過一億個數據點。