整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript (HTML5) 圖表控件AnyChart v7.10.1發布

          nyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件,可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用,可用于儀表盤、報表、數據分析、統計學、金融等領域。AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API,AnyChart圖表內置客戶端數據實時更新,多層次向下鉆區和具體參數更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗,而PDF和圖像輸出能產出圖書質量打印文檔。

          Bug修復:

          • DVF - 2170- 修復AnyChart UI和其他AnyChart產品之間的兼容性問題。
          • DVF - 2017- 修復ExtJS(3.4和更早)舊版本的兼容性問題。
          • DVF - 2167- 修復圖表滾動和連續系列的bug。
          • DVF - 2017- 修復TreeMap圖表的工具提示bug。
          更多AnyChart相關產品的最新資訊,請聯系【在線客服】

          查看更新原文:AnyChart v7.10.1

          慧都科技,十三年行業經驗,專注提供軟件技術整體解決方案,致力打造全球最大的軟件技術一站式服務平臺。

          慧都控件|幫助企業打造成功軟件

          慧都提供全球優質控件產品/控件培訓/項目定制開發/方案咨詢/現場實施/項目外包/專業測試

          微信ID:EVGET_Huidu

          企業QQ:800018081|電話:023-66090381

          掃碼關注微信

          天我們將為大家帶來受廣大開發人員認可的3款JavaScript 圖表工具,分別是 LightningChart JS、HighCharts、Plotly,本文將通過API文檔支持、適用范圍、支持的渲染數據等6個方面進行介紹,希望能幫大家選擇適合自己的圖表產品。

          Lightningchart JS

          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折線圖時,數據量會根據折線圖類型而有所不同:

          • 靜態折線圖:渲染超過 5 億個數據點,加載 1 億個數據點僅需 6.5 秒。
          • 刷新折線圖:渲染超過 200 萬個數據點。
          • 附加折線圖:每秒渲染超過 400 萬個新數據點。

          渲染性能

          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

          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

          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第三方元件。

          一、使用Axure圖形繪制可視化圖表

          Excel表格基本上每個人必備的基本計算機操作,在這里就不做演示了,先簡單說說Axure圖形繪制可視化圖表

          通過axure自帶一些圖形控件,可以輕松地通過改變形狀、大小、顏色來調整需要實現一些簡單的圖表樣式,如柱狀圖。

          用過PS的人應該都會知道Photoshop里面有個鋼筆工具,主要用來勾勒一些不規則的輪廓以及勾勒線條或者摳圖。Axure從8.0版本開始,也加入了鋼筆工具以及切圖等功能,Axure的鋼筆工具其實和PS里面的鋼筆工具有比較多的相似之處。所以當繪制一些折線圖時,可以通過Axure的鋼筆工具完成。

          說幾個使用Axure鋼筆工具的時候需要注意的點:

          • 使用鋼筆工具時,在完成最后的點的描繪的時候,需要按鍵盤左上角的【Esc鍵】或【雙擊鼠標】完成繪制;繪制時可以添加一些輔助線,幫助定位點不偏移。
          • 完成繪制的時候,可能很多朋友還看不到線條,那是因為鋼筆工具的線條粗細默認是none的,也即是沒有線條的,因此在線條粗細那里設置一下即可。

          二、利用Axure框架嵌入可視化頁面

          以上是一些簡單的可視化圖表繪制,簡易輕便,但如果要實現一些比較麻煩的圖表,如圓餅圖、環形圖、漏斗圖等更加多樣化的數據可視化圖表或是給圖表加上一些特效,該怎么辦呢?

          可以使用antv、echarts、HighCharts等可視化工具來幫你制作可視化數據圖表。

          使用這種方法來實現數據可視化的步驟如下:

          • 進入antv、echarts、HighCharts等任意一個可視化工具的官網(百度以上關鍵詞即可)找到對應的可視化圖表;
          • 將數據可視化圖表的前端代碼拷貝下來,在代碼編輯器中修改成自己想要的數據指標以及數據項,復制到文本文件中并保存為.html文件;
          • 將生產的.html文件放到要生成Html原型的文件夾中;
          • 在原型中,拖入一個【內聯框架】-選擇框架目標-鏈接到URL或者文件-選擇上一步所保存的.htm路徑文件;

          生成Html原型:

          相對來說這種方式可以實現非常多的效果和樣式,實現起來也比較方便快速,但如果對代碼非常頭疼的產品經理,無疑是增加負擔。加上每增加、修改一個圖表都需要來回復制代碼,生成文件使用這種方法來制作,在后期的維護和修改上,并不靈活和方便,這種情況,可以考慮下面一種方法。

          三、使用Axure元件快速制作可視化圖表

          感謝那些技術大佬,貢獻了這個Axure組件庫——Axhub Charts圖表元件。這個元件的使用方法和我們常用的元件差不多,直接拖拽到內容區域進行處理即可。

          不過該元件比其他普通的元件稍微復雜一些,元件使用了1個矩形+2個中繼器來實現,通過加載組件庫中的JS代碼,呈現圖表效果,(說到代碼,元件的作者已經把需要代碼處理的地方處理好了,使用者不需要懂代碼)。

          矩形的作用是設置圖表的寬高尺寸的,第一個中繼器的作用是設置橫坐標以及統計指標(曲線、柱形、扇區等),因為中繼器的列名不能夠使用中文命名,元件的作者為了能夠滿足大家的個性化需求,因此用第二個中繼器來設置是否顯示坐標軸、圖例標記、主題顏色等。

          元件中有詳細的說明以及常見問題解釋,結合了阿里的Antv數據可視化工具來做的,使用的時候,步驟如下:

          • 將元件拖拽到Axure的內容區,并根據需要調整元件的寬高尺寸,圖表顯示出來的大小就是元件的寬高尺寸;
          • 修改axhub-line-data這個中繼器的數據集,修改前可預覽看看預設的數據是怎么顯示的再作修改,一般況下,列名和行分別表示著柱形或者線條和橫坐標內容;
          • 基本上完成以上兩步即可,如果有其他的個性化需要,可在axhub-line-config中設置,非常方便!

          生成Html原型或者預覽,都可以看到動態的圖表,必須在有網絡的情況下才能夠看到圖表,因為原型需要加載在線的antv或echarts的庫文件來渲染圖表,當然你也可以把渲染庫下載到本地,修改圖表元件庫的指向鏈接就可以了。

          只是為了提高效率而已,在使用的過程中,不必想著花大量的時間去將原型做得多好多炫,當然,如果自己非常熟練了,或者很多東西都已經元件化了,在不影響效率和進度的情況下,把原型做得更完美一些也是可以的。

          組件庫作者介紹的非常詳細,可以自己下載使用,鏈接地址:

          https://axhub.im/pro/3320ad07d6897b89/#g=1&p=about

          作者:Iam產品人,公眾號:Iam產品人

          本文由@Iam產品人 原創發布于人人都是產品經理,未經許可,禁止轉載。

          題圖來自Unspalsh, 基于CC0協議


          主站蜘蛛池模板: 久久一区二区明星换脸| 无码人妻一区二区三区免费n鬼沢 无码人妻一区二区三区免费看 | 中文字幕一区在线观看| 无码一区二区三区老色鬼| 亚洲日韩激情无码一区| 日本高清一区二区三区| 无码人妻AⅤ一区二区三区| 国产成人精品亚洲一区| 亚洲av日韩综合一区二区三区 | 亚洲国产精品一区二区三区在线观看| 日韩一区二区三区不卡视频 | 少妇精品无码一区二区三区 | 久久精品无码一区二区三区免费 | 欧洲精品码一区二区三区免费看| 国产一区二区三区在线2021 | 日本精品高清一区二区| av无码一区二区三区| 三级韩国一区久久二区综合| 亚洲AV日韩综合一区尤物| 波多野结衣一区视频在线| 亚洲AV成人一区二区三区在线看| 亚洲一区二区三区不卡在线播放| 亚洲不卡av不卡一区二区| 国产一区二区精品| 日本成人一区二区| 伊人久久大香线蕉av一区| 久久精品一区二区三区不卡| 久久se精品一区二区国产| 91精品福利一区二区三区野战| 一区二区三区日韩精品| 亚洲一区二区三区乱码在线欧洲| 欧美日韩综合一区二区三区| 少妇人妻精品一区二区| 国产一区二区三区视频在线观看| 色综合一区二区三区| 亚洲AV成人精品日韩一区18p| 成人区精品一区二区不卡| 久久精品一区二区三区日韩| 国产日韩精品视频一区二区三区| 国产一区美女视频| 久久99国产精品一区二区|