中興AX5400Pro+上手體驗：再升級 雙2.5G網口+USB 3.0這次全都有
2021年11月的時候，中興先后發布了兩款路由器產品，中興AX5400和中興AX5400 Pro，從產品命名上就不難看出這是隸屬于同一系列的，但在外觀設計上這兩款產品可以說是完全沒一點關系
圖片
（組合圖表及透視圖表）
在DataWind中，除了基礎了二維表格渲染以外，還為用戶在單元格內提供條件格式的功能，包括渲染圖標集、色階、數據圖等場景，以及將單元格渲染為圖片、視頻、鏈接、迷你圖表等需求。并且支持在表頭上進行排序、固定列、字段配置等功能菜單。
圖片
DataWind支持了透視表格的制作，透視表將數據按照列維度、行維度進行匯總計算和展現。通過簡單地配置列維度、行維度和指標，即可展示出透視表。與表格相比，透視表將維度區分成了行與列，在多維度情況下更利于表格呈現。并且同時支持了條件格式、內容渲染等二維表支持的特色功能。
圖片
此外DataWind還為用戶提供了趨勢分析表的功能，趨勢分析表可以支持查看核心指標按不同日期粒度聚合的數據，并可以對單個指標進一步的作對比、看趨勢、求均值。
圖片
DataWind提供了Gis 地圖來支持LBS需求，其中包括熱力地圖、散點地圖、飛線地圖、柱狀地圖等。
DataWind中豐富的可視化展現形式得益于開源可視化解決方案 VisActor，DataWind 重度使用了圖表組件VChart 和 多維表格組件庫 VTable。
同時DataWind 研發團隊與 VisActor 團隊深度合作，參與開源建設，使得一些個性化需求可以得到快速滿足。
VChart(https://www.visactor.io/vchart) 幾乎覆蓋了所有常見的統計圖表類型，并且提供了豐富的擴展接口。這使得 DataWind 在根據用戶反饋擴充圖表類型，增強圖表能力變得非常容易。
（VChart Gallery：https://www.visactor.io/vchart/example）
表格方面，VTable組件則完全承載了業務的需求，通過Canvas對表格進行高性能渲染。實現二維表、透視表、透視圖的能力以外，還支持了自定義單元格渲染，單元格渲染迷你圖，樹形展示、透視分析等高階功能。
圖片
（在線體驗：https://www.visactor.io/vtable/example）
而組合圖表與透視圖表的實現，則是結合了VChart與VTable各自的優勢特性合并而來，得益于VisActor統一的底層渲染實現，可以容易的使用VTable的布局能力，嵌套VChart的圖表渲染能力實現組合圖表與透視圖表。
通過在VTable上注冊VChart圖表組件，利用VTable的透視表布局能力，將VChart圖表組件渲染到單元格內，VTable則負責維護圖表實例以及事件更新。
圖片
例如上面展示的透視圖表完整實現：https://codesandbox.io/s/pivotchart-with-vtable-p8d6f6
代碼結構如下：
圖片
從代碼中我們可以看到通過行列的定義和數據配置，可以表達數據的透視結構，同時在統計圖表中使用的軸、圖例、標注等組件可以完美的融合在表格中，極大增強了表格的可視化擴展能力。
由于BI 系統的復雜性，以及需要通用圖表和表格能力之外的定制化可視化能力，DataWind 在VisActor的擴展機制基礎上，做了一層面向BI系統的可視化封裝。架構設計如下：
圖片
通過以上封裝，可以快速實現BI系統或類BI的指標報表平臺。
在DataWind產品中，面對不同的業務對象，往往采用的圖表設計也不盡相同。一個好的圖表應該具有清晰的結構、易于閱讀的標簽和軸線、合適的顏色和字體等等，并且要適配當前業務的特點。
DataWind 支持在多個層面上靈活配置圖表風格。
在圖表層面，支持一鍵替換圖表的數據色板：
圖片
DataWind的圖表主題設計遵循以下原則：
VisActor提供豐富的圖表樣式配置。不僅限于配色主題的自定義，更有文字自適應、布局排版、動畫配置等高定制內容，以適應DataWind產品中復雜的可視化需求。
下面以 VChart 的主題色板功能為例進行介紹。在對數據進行可視化的過程中，顏色是極為關鍵的元素。如何為圖表選擇合適的色彩，以突顯數據的特征并搭配得體，是數據可視化中的一門藝術。VChart 為用戶提供了強大且靈活的色板功能，能滿足各種應用場景下的色彩需求。
VChart 支持的色板分為兩大類：
其中，數據色板允許同時存在多套色板方案，具體應用哪個色板需要靠具體的條件（如數據類別的個數）來判斷。因此 VChart 可以很輕松地實現靈活的設計需求：
圖片
VChart 中注冊和應用主題的代碼簡單直接：
const theme = { name: "dark", background: "#202020", colorScheme: { default: { palette: { titleFontColor: "#e2e3e6", labelFontColor: "#888c93", labelReverseFontColor: "#202020", axisGridColor: "#404349", axisDomainColor: "#55595f", backgroundColor: "#202020" } } }};// 注冊主題VChart.ThemeManager.registerTheme("dark_tmp", theme);const vchart = new VChart(spec, { dom: "container" });vchart.renderAsync();// 主題熱更新vchart.setCurrentTheme("dark_tmp");（VChart 主題完整示例地址：https://codesandbox.io/s/dark-theme-whm775）
除了設計好的圖表外，圖表的交互性也非常重要。通過圖表的交互功能，用戶可以更深入地了解數據，進行更復雜的分析和探索。
當用戶將鼠標懸停在圖表上時，可以顯示數據的詳細信息和標簽。即觸發圖表提示信息（Tooltip）。DataWind支持用戶對Tooltip進行富文本渲染，甚至支持了tooltip內渲染圖表的能力。
圖片
用戶可以通過縮放和平移圖表來查看更詳細的數據。
圖片
以下演示了托管鼠標 hover 事件繪制自定義 tooltip 的能力，通過向圖表內注冊Tooltip觸發的事件，即可接收到Tooltip繪制或更新的消息，并且可以通過解析該消息獲得圖表hover的具體信息。
示例代碼如下：
vchart.setTooltipHandler({ showTooltip: (activeType, tooltipData, params) => { const tooltip = document.getElementById('tooltip'); tooltip.style.left = params.event.x + 'px'; tooltip.style.top = params.event.y + 'px'; let data = []; if (activeType === 'dimension') { data = tooltipData[0]?.data[0]?.datum ?? []; } else if (activeType === 'mark') { data = tooltipData[0]?.datum ?? []; } tooltipChart.updateData( 'tooltipData', data.map(({ type, value, month }) => ({ type, value, month })) ); tooltip.style.visibility = 'visible'; }, hideTooltip: () => { const tooltip = document.getElementById('tooltip'); tooltip.style.visibility = 'hidden'; }, release: () => { tooltipChart.release(); const tooltip = document.getElementById('tooltip'); tooltip.remove(); }});效果如下：
圖片
核心代碼如下：
const spec = { type: 'line', markPoint: [ { coordinate: { year: '1878', population: 100 }, itemContent: {//文字標注 offsetY: -100, type: 'richText', autoRotate: false, richText: { （...富文本配置略） } }, itemLine: {// 線標注 ... }, { (...) } ],...};const vchart = new VChart(spec, { dom: CONTAINER_ID });vchart.renderAsync();（完整示例代碼可見：https://www.visactor.io/vchart/demo/marker/mark-point-basic）
VisActor也可以通過動態圖表和動畫等功能進行獨立敘事。例如用帶有自動播放進度條的圖表表示數據隨時間遷移：
圖片
VMind中的圖表智能推薦功能能夠基于數據特性和用戶意圖，完成字段篩選、圖表類型推薦、視覺通道映射、圖表配色，從無到有生成數據圖表。
圖片
調用VMind 組件代碼示例如下：
import VMind from '@visactor/VMind'const vmind = new VMind(openAIKey) //傳入openAI keyconst data=`品牌名稱,市場份額,平均價格,凈利潤Apple,0.5,7068,314531Samsung,0.2,6059,362345Vivo,0.05,3406,234512Nokia,0.01,1064,-1345Xiaomi,0.1,4087,131345`const describe="展示各品牌市場占有率，森林風格"http://傳入csv格式的數據和圖表描述，返回圖表spec和圖表動畫時長const { spec, time } = await vmind.generateChart(data, describe); //調用VChart進行渲染const vchart = new VChart(spec, { dom: CONTAINER_ID });vchart.renderAsync();得益于可視化渲染引擎 VRender 的優越性能以及多種優化策略， VChart 與 VTable 提供了卓越的渲染性能以及流暢的交互體驗。
VChart 提供了 LTTB 的降采樣方案，通過較少數據量的數據點保持了原始數據的視覺特性，從而降低渲染的計算負擔。
除此之外，VChart 還支持漸進式渲染以避免大量圖形的繪制導致的頁面卡頓。通過渲染任務拆分，VChart 將創建好的圖形元素放置在多個幀內執行渲染，從而避免過長的同步計算任務阻塞住頁面邏輯，使得圖表呈現流暢自如。VChart 支持在任意圖表中開啟漸進式渲染配置，以下圖為例：
圖片
得益于圖形渲染庫VRender提供的強大跨端渲染能力，VChart圖表支持web、node、h5、小程序等多種場景。在跨端場景中，圖表可能擁有不同的交互響應和特性，適配觸摸屏等移動設備的交互方式和事件。
VChart提供了lark-vchart、taro-vchart封裝，使得在不同的跨端場景中使用VChart變得更加方便和簡單。
針對web場景，VChart提供了React-VChart封裝，它提供了一系列易于使用的 React 組件，用于方便的在 React 開發環境中創建各種類型的圖表。組件具有高度的可定制性和可擴展性，可以通過傳遞不同的參數和配置來實現不同的圖表效果，快速創建各種類型的圖表。
無論是在web端、移動端還是其它場景中，VChart圖表庫都能夠提供高質量的圖表渲染和交互效果，滿足用戶對數據可視化的需求。
以飛書小程序（小組件）為例，用戶可以通過VChart 提供的小組件開發模版，快速將圖表嵌入小組件中：
以下是小程序中的代碼示例:
Page({ data: { canvasId: 'chartId', // canvasId 圖表唯一Id events: [], // events 自定義事件 styles: ` height: 50vh; width: 100% `, // 樣式字符 // 圖表配置項 spec: { type: 'pie', data: [ { id: 'data1', values: [ ...] } ], } }, onLoad: function (options) {}});（完整教程:https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/lark）
未來，隨著技術的發展和用戶需求的不斷增長，BI 產品對可視化的需求在交互、易用性、智能化、敘事特征等方面都會不斷發生變化，要求會越來越高。
VisActor作為一款免費開源可視化解決方案，經過火山引擎海量真實用戶場景的驗證和打磨。在功能性、美觀性、性能、跨端支持度上都做到了非常好的效果，能夠很好的助力業務實現可視化能力的增強和落地。
DataWind 擁抱開源，與VisActor 緊密合作，互相配合，為開源產品在商業場景中的落地做了很好的示范。
我們愿意和數據產品相關產品經理、設計師、研發同學一起做更加深入的探討和交流：
本文鏈接：http://www.tebozhan.com/showinfo-26-10442-0.html火山引擎 DataWind 產品可視化能力揭秘
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號