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協議