分享10+可視圖表庫(kù), 助你輕松制作精美可視化大屏
在開(kāi)發(fā)可視化項(xiàng)目的過(guò)程中往往涉及到可視化圖表, 我們看到的很多酷炫的報(bào)表, 大屏, 都用了非常多的圖表, 接下來(lái)我和大家分享一些比較流行的開(kāi)源免費(fèi)的圖表庫(kù).
1.D3.js
圖片
D3 全稱（Data-Driven Documents），一個(gè)被數(shù)據(jù)驅(qū)動(dòng)的圖表庫(kù)。由 JavaScript 開(kāi)發(fā) ，它能大大減小我們的工作量，尤其是在數(shù)據(jù)可視化方面，D3 可以將生成可視化的復(fù)雜步驟精簡(jiǎn)到了幾個(gè)簡(jiǎn)單的函數(shù)，我們只需要輸入幾個(gè)簡(jiǎn)單的數(shù)據(jù)，就能夠轉(zhuǎn)換為各種絢麗的圖形。
接下來(lái)我們看一下用它實(shí)現(xiàn)一個(gè)柱狀圖的案例:
圖片
代碼如下:
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"
})我們可以很高效的實(shí)現(xiàn)一個(gè)簡(jiǎn)單圖表, 同樣我們也可以使用 D3 實(shí)現(xiàn)一個(gè)復(fù)雜可視化圖表:
圖片
如果大家感興趣的話可以參考一下.
github地址: https://github.com/d3/d3
2. ApexCharts
圖片
ApexCharts 是一個(gè)簡(jiǎn)潔的 SVG 圖表庫(kù)，附帶 Vue 和 React 包裝器。它在不同設(shè)備上的效果非常絲滑，并提供了詳細(xì)的文檔。ApexCharts 是一個(gè)麻省理工學(xué)院許可的開(kāi)源項(xiàng)目，可用于商業(yè)和非商業(yè)項(xiàng)目。
接下來(lái)分享一下它提供的一些圖表展示:
圖片
分析雷達(dá):
圖片
統(tǒng)計(jì)分析:
圖片
目前已支持 vue, angular, react 等主流框架, 通用性還是非常棒的. 如果大家感興趣的話可以參考一下.
github地址: https://gitee.com/mirrors/ApexChartsJS
3. Chart.js
圖片
Chart.js 是一個(gè)非常受歡迎的開(kāi)源庫(kù)，在 GitHub 上超過(guò) 6 萬(wàn)+ star。靈活 且輕量，允許我們使用 HTML5 Canvas 元素構(gòu)建響應(yīng)式圖表?？梢暂p松地對(duì)折線圖和條形圖進(jìn)行混合和匹配以組合不同的數(shù)據(jù)集，實(shí)現(xiàn)非常有意思的功能, 支持 vue 和 react。
接下來(lái)我們看一下使用它的配置:
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è)計(jì)原則是基于 Ant Design 設(shè)計(jì)體系衍生的，具有數(shù)據(jù)可視化特性的指導(dǎo)原則。它在遵循 Ant Design 設(shè)計(jì)價(jià)值觀的同時(shí)，對(duì)數(shù)據(jù)可視化領(lǐng)域的進(jìn)一步解讀，如色板、字體的指引。
AntV 經(jīng)過(guò)大量的項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)，總結(jié)了四條核心原則：準(zhǔn)確、清晰、有效、美，這四條原則按重要等級(jí)先后排序，相輔相成且呈遞進(jìn)關(guān)系。
圖片
我們看一下它提供的圖表案例:
圖片
如果大家感興趣的話可以參考一下.
github地址: https://github.com/antvis
5. Echarts
圖片
Apache ECharts 是一個(gè)基于 JavaScript 的開(kāi)源可視化圖表庫(kù), 內(nèi)置了非常多的可視化圖表庫(kù), 包括常用的柱圖, 餅圖, 折線圖等, 還有非常多的3D組件, 如下:
圖片
圖片
如果大家感興趣的話可以參考一下.
github地址: https://github.com/apache/echarts
6. Nivo
圖片
Nivo 是一個(gè)基于 D3 和 React 的精美的可視化圖表框架，提供十四種不同類型的組件來(lái)呈現(xiàn)圖表數(shù)據(jù)。
Nivo 提供了許多自定義選項(xiàng)和三個(gè)渲染選項(xiàng)：Canvas，SVG，甚至基于 API 的HTML。它的文檔非常出色，Demo 可配置且非常有意思。這是一個(gè)高級(jí)庫(kù)，使用非常便捷。接下來(lái)分享幾個(gè)圖表案例:
圖片
代碼案例:
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 是一個(gè)開(kāi)源的 JS 庫(kù)；用于生成可與用戶交互的、可縮放的時(shí)間圖表。主要用于顯示密集的數(shù)據(jù)集合，用戶能夠很好的瀏覽和查看數(shù)據(jù)。
接下來(lái)分享幾個(gè)圖表案例:
圖片
圖片
如果大家感興趣的話可以參考一下.
github地址: https://github.com/danvk/dygraphs
8. Protovis
圖片
Protovis 是一個(gè)可視化 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）圖表。這個(gè)名字的背后在于這個(gè)圖表在設(shè)計(jì)上帶給開(kāi)發(fā)者的是不一樣的體驗(yàn)，不僅是用 React 設(shè)計(jì)，也在于重新定義了組合與配置方式。接下來(lái)我們看一下它提供的圖表案例:
圖片
我們可以看到它完全是用 react 寫(xiě)的, 寫(xiě)法非常簡(jiǎn)單.
如果大家感興趣的話可以參考一下.
github地址: https://github.com/recharts/recharts
小夕說(shuō)
，贊31
10. frappe-charts
圖片
Frappe Charts 是一款免費(fèi)開(kāi)源、輕量無(wú)依賴的 web 圖表庫(kù)，簡(jiǎn)單不臃腫，支持搭配 Vue / React 等框架使用. 接下來(lái)給大家分享幾個(gè)圖表案例:
餅圖:
圖片
百分比:
圖片
熱力圖:
圖片
雙柱圖:
圖片
如果大家感興趣的話可以參考一下.
github地址: https://github.com/frappe/charts
