當前位置：首頁 > 科技 > 軟件

分享10+可視圖表庫, 助你輕松制作精美可視化大屏

來源：責編：時間：2023-10-13 14:36:49 271觀看

導讀在開發可視化項目的過程中往往涉及到可視化圖表, 我們看到的很多酷炫的報表, 大屏, 都用了非常多的圖表, 接下來我和大家分享一些比較流行的開源免費的圖表庫.1.D3.js圖片D3 全稱（Data-Driven Documents），一個被數據驅動

在開發可視化項目的過程中往往涉及到可視化圖表, 我們看到的很多酷炫的報表, 大屏, 都用了非常多的圖表, 接下來我和大家分享一些比較流行的開源免費的圖表庫.

1.D3.js

圖片

D3 全稱（Data-Driven Documents），一個被數據驅動的圖表庫。由 JavaScript 開發，它能大大減小我們的工作量，尤其是在數據可視化方面，D3 可以將生成可視化的復雜步驟精簡到了幾個簡單的函數，我們只需要輸入幾個簡單的數據，就能夠轉換為各種絢麗的圖形。

接下來我們看一下用它實現一個柱狀圖的案例:

圖片

代碼如下:

chart = BarChart(alphabet, {  x: d => d.letter,  y: d => d.frequency,  xDomain: d3.groupSort(alphabet, ([d]) => -d.frequency, d => d.letter), // sort by descending frequency  yFormat: "%",  yLabel: "↑ Frequency",  width,  height: 500,  color: "steelblue"})

我們可以很高效的實現一個簡單圖表, 同樣我們也可以使用 D3 實現一個復雜可視化圖表:

圖片

如果大家感興趣的話可以參考一下.

github地址: https://github.com/d3/d3

2. ApexCharts

圖片

ApexCharts 是一個簡潔的 SVG 圖表庫，附帶 Vue 和 React 包裝器。它在不同設備上的效果非常絲滑，并提供了詳細的文檔。ApexCharts 是一個麻省理工學院許可的開源項目，可用于商業和非商業項目。

接下來分享一下它提供的一些圖表展示:

圖片

分析雷達:

圖片

統計分析:

圖片

目前已支持 vue, angular, react 等主流框架, 通用性還是非常棒的. 如果大家感興趣的話可以參考一下.

github地址: https://gitee.com/mirrors/ApexChartsJS

3. Chart.js

圖片

Chart.js 是一個非常受歡迎的開源庫，在 GitHub 上超過 6 萬+ star。靈活且輕量，允許我們使用 HTML5 Canvas 元素構建響應式圖表。可以輕松地對折線圖和條形圖進行混合和匹配以組合不同的數據集，實現非常有意思的功能, 支持 vue 和 react。

接下來我們看一下使用它的配置:

const config = {  type: 'bar',  data: data,  options: {    responsive: true,    plugins: {      legend: {        position: 'top',      },      title: {        display: true,        text: 'Chart.js Bar Chart'      }    }  },};

折線圖案例:

圖片

雷達圖:

圖片

如果大家感興趣的話可以參考一下.

github地址: https://github.com/chartjs/Chart.js

4. AntV

圖片

數據可視化 AntV 的設計原則是基于 Ant Design 設計體系衍生的，具有數據可視化特性的指導原則。它在遵循 Ant Design 設計價值觀的同時，對數據可視化領域的進一步解讀，如色板、字體的指引。

AntV 經過大量的項目實戰經驗，總結了四條核心原則：準確、清晰、有效、美，這四條原則按重要等級先后排序，相輔相成且呈遞進關系。

圖片

我們看一下它提供的圖表案例:

圖片

如果大家感興趣的話可以參考一下.

github地址: https://github.com/antvis

5. Echarts

圖片

Apache ECharts 是一個基于 JavaScript 的開源可視化圖表庫, 內置了非常多的可視化圖表庫, 包括常用的柱圖, 餅圖, 折線圖等, 還有非常多的3D組件, 如下:

圖片

如果大家感興趣的話可以參考一下.

github地址: https://github.com/apache/echarts

6. Nivo

圖片

Nivo 是一個基于 D3 和 React 的精美的可視化圖表框架，提供十四種不同類型的組件來呈現圖表數據。

Nivo 提供了許多自定義選項和三個渲染選項：Canvas，SVG，甚至基于 API 的HTML。它的文檔非常出色，Demo 可配置且非常有意思。這是一個高級庫，使用非常便捷。接下來分享幾個圖表案例:

圖片

代碼案例:

import { ResponsiveBar } from '@nivo/bar'const MyResponsiveBar = ({ data /* see data tab */ }) => (    <ResponsiveBar        data={data}        keys={[            'hot dog',            'burger',            'sandwich',            'kebab',            'fries',            'donut'        ]}        indexBy="country"        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}        padding={0.3}        valueScale={{ type: 'linear' }}        indexScale={{ type: 'band', round: true }}        colors={{ scheme: 'nivo' }}        borderColor={{            from: 'color',            modifiers: [                [                    'darker',                    1.6                ]            ]        }}        axisTop={null}        axisRight={null}        axisBottom={{            legend: 'country',            legendPosition: 'middle',            legendOffset: 32        }}        axisLeft={{            tickSize: 5,            tickPadding: 5,            tickRotation: 0,            legend: 'food',            legendPosition: 'middle',            legendOffset: -40        }}        labelSkipWidth={12}        labelSkipHeight={12}        labelTextColor={{            from: 'color',            modifiers: [                [                    'darker',                    1.6                ]            ]        }}        role="application"        ariaLabel="Nivo bar chart demo"        barAriaLabel={function(e){return e.id+": "+e.formattedValue+" in country: "+e.indexValue}}    />)

如果大家感興趣的話可以參考一下.

github地址: https://github.com/plouc/nivo

7. dygraphs

圖片

Dygraphs 是一個開源的 JS 庫；用于生成可與用戶交互的、可縮放的時間圖表。主要用于顯示密集的數據集合，用戶能夠很好的瀏覽和查看數據。

接下來分享幾個圖表案例:

圖片

如果大家感興趣的話可以參考一下.

github地址: https://github.com/danvk/dygraphs

8. Protovis

圖片

Protovis 是一個可視化 javaScript 圖表生成工具, 案例如下:

圖片

泡泡圖:

圖片

代碼示例:

/* Sizing and scales. */var w = 400,    h = 250,    x = pv.Scale.linear(0, 1.1).range(0, w),    y = pv.Scale.ordinal(pv.range(10)).splitBanded(0, h, 4/5);/* The root panel. */var vis = new pv.Panel()    .width(w)    .height(h)    .bottom(20)    .left(20)    .right(10)    .top(5);/* The bars. */var bar = vis.add(pv.Bar)    .data(data)    .top(function() y(this.index))    .height(y.range().band)    .left(0)    .width(x);/* The value label. */bar.anchor("right").add(pv.Label)    .textStyle("white")    .text(function(d) d.toFixed(1));/* The variable label. */bar.anchor("left").add(pv.Label)    .textMargin(5)    .textAlign("right")    .text(function() "ABCDEFGHIJK".charAt(this.index));/* X-axis ticks. */vis.add(pv.Rule)    .data(x.ticks(5))    .left(x)    .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")  .add(pv.Rule)    .bottom(0)    .height(5)    .strokeStyle("#000")  .anchor("bottom").add(pv.Label)    .text(x.tickFormat);vis.render();

如果大家感興趣的話可以參考一下.

github地址: https://github.com/protovis

9. Recharts

圖片

Recharts 含義是重新定義（Redefined）圖表。這個名字的背后在于這個圖表在設計上帶給開發者的是不一樣的體驗，不僅是用 React 設計，也在于重新定義了組合與配置方式。接下來我們看一下它提供的圖表案例:

圖片

我們可以看到它完全是用 react 寫的, 寫法非常簡單.

如果大家感興趣的話可以參考一下.

github地址: https://github.com/recharts/recharts

小夕說

，贊31

10. frappe-charts

圖片

Frappe Charts 是一款免費開源、輕量無依賴的 web 圖表庫，簡單不臃腫，支持搭配 Vue / React 等框架使用. 接下來給大家分享幾個圖表案例:

餅圖:

圖片

百分比:

圖片

熱力圖:

圖片

雙柱圖:

圖片

如果大家感興趣的話可以參考一下.

github地址: https://github.com/frappe/charts

本文鏈接：http://www.www897cc.com/showinfo-26-13287-0.html分享10+可視圖表庫, 助你輕松制作精美可視化大屏

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：我給清華智譜Ai(ChatGLM)，寫個Java對接的SDK！

下一篇： Springboot整合Ehcache和Redis實現多級緩存實戰案例

標簽：

熱門焦點

盧偉冰長文解析K60至尊版對Redmi有著里程碑式的意義

在今天的Redmi后性能時代戰略發布會結束之后，Redmi總經理盧偉冰又帶來了一篇長文，詳解了為什么 Redmi 要開啟后性能時代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
官方承諾：K60至尊版將會首批升級MIUI 15

全新的MIUI 15今天也有了消息，在官宣了K60至尊版將會搭載天璣9200+處理器和獨顯芯片X7的同時，Redmi給出了官方承諾，K60至尊重大更新首批升級，會首批推送MIUI 15。也就是說雖然
使用Webdriver-manager解決瀏覽器與驅動不匹配所帶來自動化無法執行的問題

1、前言在我們使用 Selenium 進行 UI 自動化測試時，常常會因為瀏覽器驅動與瀏覽器版本不匹配，而導致自動化測試無法執行，需要手動去下載對應的驅動版本，并替換原有的驅動，可能還
得物寵物生意「狂飆」，發力“它經濟”

作者｜花花小萌主近日，得物宣布正式上線寵物鑒別，通過得物App內的“在線鑒別”，可找到鑒別寵物的選項。通過上傳自家寵物的部位細節，就能收獲擁有專業資質認證的得物鑒
新電商三兄弟，“抖快紅”成團！

來源：價值研究所作者：Hernanderz 隨著內容電商的概念興起，抖音、快手、小紅書組成的“新電商三兄弟”成為業內一股不可忽視的勢力，給阿里、京東、拼多多帶去了巨大壓
造車兩年股價跌六成，小米的估值邏輯變了嗎？

如果從小米官宣造車后的首個交易日起持有小米集團的股票，那么截至2023年上半年最后一個交易日，投資者將浮虧59.16%，同區間的恒生科技指數跌幅為52.78%
8月見！小米MIX Fold 3獲得3C認證：支持67W快充

這段時間以來，包括三星、一加、榮耀等等有不少品牌旗下的最新折疊屏旗艦都得到了不少爆料，而小米新一代折疊屏旗艦——小米MIX Fold 3此前也屢屢被傳
四年持續更迭堅持探索行業無人之境，HarmonyOS 4帶來五大升級多項創新

除了華為每年新發布的旗艦手機系列，上億花粉更加期待鴻蒙系統每次的跨版本大更新。8月4日，HarmonyOS 4于HDC 2023正式發布，這也是該系統歷經四年的再
AI藝術欣賞體驗會在上海梅賽德斯奔馳中心音樂俱樂部上演

光影交錯的鏡像世界，虛實幻化的視覺奇觀，虛擬偶像與真人共同主持，這些場景都出現在2019世界人工智能大會的舞臺上。8月29日至31日，“AI藝術欣賞體驗會”在上海

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

分享10+可視圖表庫, 助你輕松制作精美可視化大屏

1.D3.js

2. ApexCharts

3. Chart.js

4. AntV

5. Echarts

6. Nivo

7. dygraphs

8. Protovis

9. Recharts

10. frappe-charts

盧偉冰長文解析K60至尊版對Redmi有著里程碑式的意義

官方承諾：K60至尊版將會首批升級MIUI 15

使用Webdriver-manager解決瀏覽器與驅動不匹配所帶來自動化無法執行的問題

得物寵物生意「狂飆」，發力“它經濟”

新電商三兄弟，“抖快紅”成團！

造車兩年股價跌六成，小米的估值邏輯變了嗎？

8月見！小米MIX Fold 3獲得3C認證：支持67W快充

四年持續更迭堅持探索行業無人之境，HarmonyOS 4帶來五大升級多項創新

AI藝術欣賞體驗會在上海梅賽德斯奔馳中心音樂俱樂部上演

最新推薦

猜你喜歡

熱門推薦

相關資訊