當(dāng)前位置：首頁 > 科技 > 軟件

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

來源：責(zé)編：時間：2023-10-13 14:36:49 217觀看

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

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

1.D3.js

圖片

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

接下來我們看一下用它實現(xiàn)一個柱狀圖的案例:

圖片

代碼如下:

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"})

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

圖片

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

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

2. ApexCharts

圖片

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

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

圖片

分析雷達(dá):

圖片

統(tǒng)計分析:

圖片

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

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

3. Chart.js

圖片

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

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

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

折線圖案例:

圖片

雷達(dá)圖:

圖片

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

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

4. AntV

圖片

數(shù)據(jù)可視化 AntV 的設(shè)計原則是基于 Ant Design 設(shè)計體系衍生的，具有數(shù)據(jù)可視化特性的指導(dǎo)原則。它在遵循 Ant Design 設(shè)計價值觀的同時，對數(shù)據(jù)可視化領(lǐng)域的進(jìn)一步解讀，如色板、字體的指引。

AntV 經(jīng)過大量的項目實戰(zhàn)經(jīng)驗，總結(jié)了四條核心原則：準(zhǔn)確、清晰、有效、美，這四條原則按重要等級先后排序，相輔相成且呈遞進(jìn)關(guān)系。

圖片

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

圖片

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

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

5. Echarts

圖片

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

圖片

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

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

6. Nivo

圖片

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

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 庫；用于生成可與用戶交互的、可縮放的時間圖表。主要用于顯示密集的數(shù)據(jù)集合，用戶能夠很好的瀏覽和查看數(shù)據(jù)。

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

圖片

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

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）圖表。這個名字的背后在于這個圖表在設(shè)計上帶給開發(fā)者的是不一樣的體驗，不僅是用 React 設(shè)計，也在于重新定義了組合與配置方式。接下來我們看一下它提供的圖表案例:

圖片

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

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

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

小夕說

，贊31

10. frappe-charts

圖片

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

餅圖:

圖片

百分比:

圖片

熱力圖:

圖片

雙柱圖:

圖片

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

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

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

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

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

下一篇： Springboot整合Ehcache和Redis實現(xiàn)多級緩存實戰(zhàn)案例

標(biāo)簽：

熱門焦點

石頭智能洗地機(jī)A10 Plus體驗：雙向自清潔治好了我的懶癌

一、前言和介紹專為家庭請假懶人而生的石頭科技在近日又帶來了自己的全新旗艦新品，石頭智能洗地機(jī)A10 Plus。從這個產(chǎn)品名上就不難看出，這次石頭推出的并不是常見的掃地機(jī)器
摸魚心法第一章——和配置文件說拜拜

為了能摸魚我們團(tuán)隊做了容器化，但是帶來的問題是服務(wù)配置文件很麻煩，然后大家在群里進(jìn)行了“親切友好”的溝通圖片圖片圖片圖片對比就對比，簡單對比下獨立配置中心和k8s作為配
四年持續(xù)更迭堅持探索行業(yè)無人之境，HarmonyOS 4帶來五大升級多項創(chuàng)新

除了華為每年新發(fā)布的旗艦手機(jī)系列，上億花粉更加期待鴻蒙系統(tǒng)每次的跨版本大更新。8月4日，HarmonyOS 4于HDC 2023正式發(fā)布，這也是該系統(tǒng)歷經(jīng)四年的再
華為Mate60標(biāo)準(zhǔn)版細(xì)節(jié)曝光：經(jīng)典星環(huán)相機(jī)模組回歸

這段時間以來，關(guān)于華為新旗艦的爆料日漸密集。據(jù)此前多方爆料，今年華為將開始恢復(fù)一年雙旗艦戰(zhàn)略，除上半年推出的P60系列外，往年下半年的Mate系列也將
2納米決戰(zhàn)2025

集微網(wǎng)報道從三強(qiáng)爭霸到四雄逐鹿，2nm的廝殺聲已然隱約傳來。無論是老牌勁旅臺積電、三星，還是誓言重回先進(jìn)制程領(lǐng)先地位的英特爾，甚至初成立不久的新
AI芯片初創(chuàng)公司Tenstorrent獲三星和現(xiàn)代1億美元投資

Tenstorrent是一家由芯片行業(yè)資深人士Jim Keller領(lǐng)導(dǎo)的加拿大初創(chuàng)公司，專注于開發(fā)人工智能芯片，該公司周三表示，已經(jīng)從現(xiàn)代汽車集團(tuán)和三星投資基金等
三星Galaxy Z Fold/Flip 5國行售價曝光：最低7499元/12999元起

據(jù)官方此前宣布，三星將于7月26日也就是明天在韓國首爾舉辦Unpacked活動，屆時將帶來帶來包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
AMD的AI芯片轉(zhuǎn)單給三星可能性不大與臺積電已合作至2nm制程

據(jù) DIGITIMES 消息，英偉達(dá) AI GPU 出貨逐季飆升，接下來 AMD MI 300 系列將在第 4 季底量產(chǎn)。而半導(dǎo)體業(yè)內(nèi)人士表示，近日傳出 AMD 的 AI 芯片將轉(zhuǎn)單給
OPPO K11采用全方位護(hù)眼屏：三大護(hù)眼能力減輕視覺疲勞

日前OPPO官方宣布，全新的OPPO K11將于7月25日正式發(fā)布，將主打旗艦影像，和同檔位競品相比，其最大的賣點就是將配備索尼IMX890主攝，堪稱是2000檔位影像表

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

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

1.D3.js

2. ApexCharts

3. Chart.js

4. AntV

5. Echarts

6. Nivo

7. dygraphs

8. Protovis

9. Recharts

10. frappe-charts

石頭智能洗地機(jī)A10 Plus體驗：雙向自清潔治好了我的懶癌

摸魚心法第一章——和配置文件說拜拜

四年持續(xù)更迭堅持探索行業(yè)無人之境，HarmonyOS 4帶來五大升級多項創(chuàng)新

華為Mate60標(biāo)準(zhǔn)版細(xì)節(jié)曝光：經(jīng)典星環(huán)相機(jī)模組回歸

2納米決戰(zhàn)2025

AI芯片初創(chuàng)公司Tenstorrent獲三星和現(xiàn)代1億美元投資

三星Galaxy Z Fold/Flip 5國行售價曝光：最低7499元/12999元起

AMD的AI芯片轉(zhuǎn)單給三星可能性不大與臺積電已合作至2nm制程

OPPO K11采用全方位護(hù)眼屏：三大護(hù)眼能力減輕視覺疲勞

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊