nyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件,可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用,可用于儀表盤、報表、數據分析、統計學、金融等領域。AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API,AnyChart圖表內置客戶端數據實時更新,多層次向下鉆區和具體參數更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗,而PDF和圖像輸出能產出圖書質量打印文檔。
查看更新原文:AnyChart v7.10.1
慧都科技,十三年行業經驗,專注提供軟件技術整體解決方案,致力打造全球最大的軟件技術一站式服務平臺。
慧都控件|幫助企業打造成功軟件
慧都提供全球優質控件產品/控件培訓/項目定制開發/方案咨詢/現場實施/項目外包/專業測試
微信ID:EVGET_Huidu
企業QQ:800018081|電話:023-66090381
掃碼關注微信
天我們將為大家帶來受廣大開發人員認可的3款JavaScript 圖表工具,分別是 LightningChart JS、HighCharts、Plotly,本文將通過API文檔支持、適用范圍、支持的渲染數據等6個方面進行介紹,希望能幫大家選擇適合自己的圖表產品。
LightningChart JS 是一款高性能的 JavaScript 圖表庫,專注于Web端數據實時可視化。支持使用高數據速率同時監控數十個數據源,其GPU加速和WebGL渲染可以確保您的設備的圖形處理器得到有效利用,實現高刷新率和流暢的動畫。可以用于貿易、工程、航空航天,醫藥和其他領域的應用。
API文檔
LightningChart JS 提供了完整的 API 文檔,該文檔詳細介紹了 JS 庫中包含的所有類、枚舉、接口、函數和對象。同時技術文檔還輔以行業示例、教程、關于使用特定圖表的介紹,以及在特定行業中如何應用這些圖表的知識。
使用范圍
LightningChart JS 支持與 Angular、TypeScript 和移動應用程序一起使用,也可以在 C#/Java Web 應用程序中使用它。
如果您對 .NET 開發非常感興趣:LightningChart .Net 提供了一個完全專注于C#的框架,C# 框架可以幫助我們創建一個基本模板(WPF、WINFORMS),以便在我們的 Visual Studio 中修改代碼和源數據。
支持的渲染數據量
LightningChart JS 與其他庫一樣有局限性,但這些局限性比較小。
在高端PC上使用JS折線圖時,數據量會根據折線圖類型而有所不同:
渲染性能
LightningChart JS 使用 WebGL 渲染,是Microsoft Visual Studio數據展示速度最快的2D和3D圖表制圖組件,可實時呈現超過10億數據點的海量數據。支持與所有可用的 JS 圖表示例進行交互。
使用范圍
LightningChart JS 有強大的 NPM 包,支持在服務器應用程序中呈現 LightningChart 圖表。詳情可在 NPM 上查看https://www.npmjs.com/package/@arction/lcjs
交互性
LightningChart JS 擁有多個 UI 功能,包括觸摸屏兼容性、縮放、平移和工具提示。這些功能是完全可自定義。
許可證
LightningChart JS 有多種許可選項,包括免費社區版本(用于非商業目的)、Web 開發人員許可證、應用程序開發人員許可證和完全適應用戶需求的企業許可證。
LightningChart 數據可視化解決方案是適用于 .NET 和 JavaScript 的高級數據可視化庫,支持處理數十億的圖表和儀表盤,是開發醫療技術、保健、金融等應用程序的首選圖表控件。
Highcharts 是一個用純 JavaScript 編寫的一個圖表庫, 能簡單便捷的在 Web 網站或是 Web 應用程序添加有交互性的圖表。
API文檔
HighCharts 提供了一個文檔站點,用戶可以在其中學習如何安裝和實現多種類型的圖表,同時我們可以使用“ 圖表選擇器 ”工具,嘗試多種類型的圖表。
適用范圍
Highcharts 應用于財務數據展示,也可以應用于數據展示中。此外,如果需要在地圖上顯示數據,也有世界地圖的 3D 版。
對于 JS,我們可以在網站或移動應用程序中使用 Ionic 的 Capacitor 等框架。對于 C#,我們可以使用HighCharts,因為它也同樣支持 .NET 和 .NET CORE , 也就是說我們可以在 Web / 桌面應用程序中使用。
支持的渲染數據量
HighCharts 默認限制為 1000 個數據點,具體可以支持多少數據點目前沒有特別準確的數據,通過查詢論壇,有報告顯示嘗試使用超過初始限制的數據點。
渲染性能
HighCharts 使用可縮放矢量圖形、HTML5 和 CSS,該圖表庫有一個服務器端選項,利用 Phantom JS 技術。
它能為各種 Web 端開發提供快速和原生的支持,如DOM 處理、CSS 選擇器、JSON、Canvas 和 SVG。
交互性
可根據設備/軟件的兼容性,提供觸摸屏兼容性、縮放、平移和工具提示。
許可證
在許可方面,HighCharts 在其免費許可的基礎上提供 Web、SaaS、SaaS+ 和 OEM。
Plotly是一個基于JS的開源數據可視化框架,提供了許多庫,可以使用多種語言使用開源編碼,包括 Python、R、Julia、JS、GGPlot2、F#、MatLab 和 Plotly Dash 。
API文檔
Plotly 有自己的文檔庫,但它的 C# 文檔不是太如人意,因為實時案例加載得很慢。
但對于編程,其文檔提供了創建圖表的完整代碼。對于每種 Web 語言,提供了包含許多示例的完整文檔。
使用范圍
Plotly 支持您在在 JS 和 C# 中創建多種類型的圖形、地圖和實時對象識別,但處理的數據量有限。
支持的渲染數據量
Plotly目前對于渲染的數據量依然沒有比較準確的數據,通過論壇的查詢,似乎標準可能是 500k 的數據,但若要嘗試渲染數百萬點的數據,就會導致崩潰。
渲染性能
Plotly 是使用 D3.js 技術構建的。此外,Plotly 還利用了 NVIDIA Inception,這是一種虛擬加速器,主要是為支持使用 GPU 的初創公司,即云端計算。但這對客戶來說并不劃算,因為它增加了運行服務的成本。
交互性
根據設備/軟件的兼容性,可提供觸摸屏兼容性、縮放、平移和工具提示。
許可證
Plotly 幾乎僅限于使用開源或企業版,無法根據用戶的要求立即了解正確的定價。
以上就是為大家介紹的3款JavaScript 圖表庫,您更中意哪一款呢?歡迎在評論區告訴我~
品經理日常工作中,避免不了需要去設計后臺,在后臺中需要去實現一些可視化的圖表,那么這些可視化圖表如何制作呢?
產品經理日常工作中,避免不了需要去設計后臺,在后臺中需要去實現一些可視化的圖表,那么這些可視化圖表如何制作呢?
可以通過四種個不同的方式,分別是:表格截圖、Axure圖形繪制、Axure網頁框架和Axure第三方元件。
Excel表格基本上每個人必備的基本計算機操作,在這里就不做演示了,先簡單說說Axure圖形繪制可視化圖表。
通過axure自帶一些圖形控件,可以輕松地通過改變形狀、大小、顏色來調整需要實現一些簡單的圖表樣式,如柱狀圖。
用過PS的人應該都會知道Photoshop里面有個鋼筆工具,主要用來勾勒一些不規則的輪廓以及勾勒線條或者摳圖。Axure從8.0版本開始,也加入了鋼筆工具以及切圖等功能,Axure的鋼筆工具其實和PS里面的鋼筆工具有比較多的相似之處。所以當繪制一些折線圖時,可以通過Axure的鋼筆工具完成。
說幾個使用Axure鋼筆工具的時候需要注意的點:
以上是一些簡單的可視化圖表繪制,簡易輕便,但如果要實現一些比較麻煩的圖表,如圓餅圖、環形圖、漏斗圖等更加多樣化的數據可視化圖表或是給圖表加上一些特效,該怎么辦呢?
可以使用antv、echarts、HighCharts等可視化工具來幫你制作可視化數據圖表。
使用這種方法來實現數據可視化的步驟如下:
生成Html原型:
相對來說這種方式可以實現非常多的效果和樣式,實現起來也比較方便快速,但如果對代碼非常頭疼的產品經理,無疑是增加負擔。加上每增加、修改一個圖表都需要來回復制代碼,生成文件使用這種方法來制作,在后期的維護和修改上,并不靈活和方便,這種情況,可以考慮下面一種方法。
感謝那些技術大佬,貢獻了這個Axure組件庫——Axhub Charts圖表元件。這個元件的使用方法和我們常用的元件差不多,直接拖拽到內容區域進行處理即可。
不過該元件比其他普通的元件稍微復雜一些,元件使用了1個矩形+2個中繼器來實現,通過加載組件庫中的JS代碼,呈現圖表效果,(說到代碼,元件的作者已經把需要代碼處理的地方處理好了,使用者不需要懂代碼)。
矩形的作用是設置圖表的寬高尺寸的,第一個中繼器的作用是設置橫坐標以及統計指標(曲線、柱形、扇區等),因為中繼器的列名不能夠使用中文命名,元件的作者為了能夠滿足大家的個性化需求,因此用第二個中繼器來設置是否顯示坐標軸、圖例標記、主題顏色等。
元件中有詳細的說明以及常見問題解釋,結合了阿里的Antv數據可視化工具來做的,使用的時候,步驟如下:
生成Html原型或者預覽,都可以看到動態的圖表,必須在有網絡的情況下才能夠看到圖表,因為原型需要加載在線的antv或echarts的庫文件來渲染圖表,當然你也可以把渲染庫下載到本地,修改圖表元件庫的指向鏈接就可以了。
只是為了提高效率而已,在使用的過程中,不必想著花大量的時間去將原型做得多好多炫,當然,如果自己非常熟練了,或者很多東西都已經元件化了,在不影響效率和進度的情況下,把原型做得更完美一些也是可以的。
組件庫作者介紹的非常詳細,可以自己下載使用,鏈接地址:
https://axhub.im/pro/3320ad07d6897b89/#g=1&p=about
作者:Iam產品人,公眾號:Iam產品人
本文由@Iam產品人 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unspalsh, 基于CC0協議
*請認真填寫需求信息,我們會在24小時內與您取得聯系。