vivo TWS Air開箱體驗(yàn)：真輕 臻好聽
在vivo S15系列新機(jī)的發(fā)布會(huì)上，vivo的最新款真無線藍(lán)牙耳機(jī)vivo TWS Air也一同發(fā)布，本次就這款耳機(jī)新品給大家?guī)硪粋€(gè)簡(jiǎn)單的分享。外包裝盒上，vivo TWS Air保持了vivo自家產(chǎn)
在開發(fā)可視化項(xiàng)目的過程中往往涉及到可視化圖表, 我們看到的很多酷炫的報(bào)表, 大屏, 都用了非常多的圖表, 接下來我和大家分享一些比較流行的開源免費(fèi)的圖表庫.
圖片
D3 全稱（Data-Driven Documents），一個(gè)被數(shù)據(jù)驅(qū)動(dòng)的圖表庫。由 JavaScript 開發(fā) ，它能大大減小我們的工作量，尤其是在數(shù)據(jù)可視化方面，D3 可以將生成可視化的復(fù)雜步驟精簡(jiǎn)到了幾個(gè)簡(jiǎn)單的函數(shù)，我們只需要輸入幾個(gè)簡(jiǎn)單的數(shù)據(jù)，就能夠轉(zhuǎn)換為各種絢麗的圖形。
接下來我們看一下用它實(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
圖片
ApexCharts 是一個(gè)簡(jiǎn)潔的 SVG 圖表庫，附帶 Vue 和 React 包裝器。它在不同設(shè)備上的效果非常絲滑，并提供了詳細(xì)的文檔。ApexCharts 是一個(gè)麻省理工學(xué)院許可的開源項(xiàng)目，可用于商業(yè)和非商業(yè)項(xiàng)目。
接下來分享一下它提供的一些圖表展示:
圖片
分析雷達(dá):
圖片
統(tǒng)計(jì)分析:
圖片
目前已支持 vue, angular, react 等主流框架, 通用性還是非常棒的. 如果大家感興趣的話可以參考一下.
github地址: https://gitee.com/mirrors/ApexChartsJS
圖片
Chart.js 是一個(gè)非常受歡迎的開源庫，在 GitHub 上超過 6 萬+ star。靈活 且輕量，允許我們使用 HTML5 Canvas 元素構(gòu)建響應(yīng)式圖表。可以輕松地對(duì)折線圖和條形圖進(jìn)行混合和匹配以組合不同的數(shù)據(jù)集，實(shí)現(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
圖片
數(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)過大量的項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)，總結(jié)了四條核心原則：準(zhǔn)確、清晰、有效、美，這四條原則按重要等級(jí)先后排序，相輔相成且呈遞進(jìn)關(guān)系。
圖片
我們看一下它提供的圖表案例:
圖片
如果大家感興趣的話可以參考一下.
github地址: https://github.com/antvis
圖片
Apache ECharts 是一個(gè)基于 JavaScript 的開源可視化圖表庫, 內(nèi)置了非常多的可視化圖表庫, 包括常用的柱圖, 餅圖, 折線圖等, 還有非常多的3D組件, 如下:
圖片
圖片
如果大家感興趣的話可以參考一下.
github地址: https://github.com/apache/echarts
圖片
Nivo 是一個(gè)基于 D3 和 React 的精美的可視化圖表框架，提供十四種不同類型的組件來呈現(xiàn)圖表數(shù)據(jù)。
Nivo 提供了許多自定義選項(xiàng)和三個(gè)渲染選項(xiàng)：Canvas，SVG，甚至基于 API 的HTML。它的文檔非常出色，Demo 可配置且非常有意思。這是一個(gè)高級(jí)庫，使用非常便捷。接下來分享幾個(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
圖片
Dygraphs 是一個(gè)開源的 JS 庫；用于生成可與用戶交互的、可縮放的時(shí)間圖表。主要用于顯示密集的數(shù)據(jù)集合，用戶能夠很好的瀏覽和查看數(shù)據(jù)。
接下來分享幾個(gè)圖表案例:
圖片
圖片
如果大家感興趣的話可以參考一下.
github地址: https://github.com/danvk/dygraphs
圖片
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
圖片
Recharts 含義是重新定義（Redefined）圖表。這個(gè)名字的背后在于這個(gè)圖表在設(shè)計(jì)上帶給開發(fā)者的是不一樣的體驗(yàn)，不僅是用 React 設(shè)計(jì)，也在于重新定義了組合與配置方式。接下來我們看一下它提供的圖表案例:
圖片
我們可以看到它完全是用 react 寫的, 寫法非常簡(jiǎn)單.
如果大家感興趣的話可以參考一下.
github地址: https://github.com/recharts/recharts
小夕說
，贊31
圖片
Frappe Charts 是一款免費(fèi)開源、輕量無依賴的 web 圖表庫，簡(jiǎn)單不臃腫，支持搭配 Vue / React 等框架使用. 接下來給大家分享幾個(gè)圖表案例:
餅圖:
圖片
百分比:
圖片
熱力圖:
圖片
雙柱圖:
圖片
如果大家感興趣的話可以參考一下.
github地址: https://github.com/frappe/charts
本文鏈接：http://www.tebozhan.com/showinfo-26-13287-0.html分享10+可視圖表庫, 助你輕松制作精美可視化大屏
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 我給清華智譜Ai(ChatGLM)，寫個(gè)Java對(duì)接的SDK！
下一篇： Springboot整合Ehcache和Redis實(shí)現(xiàn)多級(jí)緩存實(shí)戰(zhàn)案例
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)