乐趣区

关于数据可视化:火山引擎DataWind产品可视化能力揭秘

jiezi

引言

BI 是商业智能 (Business Intelligence) 的缩写，是一种将企业中现有的数据进行无效的整合的平台，它能够帮忙企业、组织和集体更好地理解其业务情况、发现问题，并进行决策。BI 产品广泛采纳可视化的形式，能够帮忙用户更直观、更高效、更智能地剖析和出现数据，从而晋升数据驱动的决策能力，疾速精确的提供报表并提供决策依据。

DataWind 是一款反对千亿级别数据自助剖析的一站式数据分析与合作平台。可买通从数据接入、数据整合、查问剖析到全员协同共享的全流程，以数据门户、数字大屏、治理驾驶舱等可视化状态，助力业务用户实现智能洞察，让数据施展价值。

本文聚焦 DataWind 产品的外围可视化能力，并为您揭秘其实现原理。

丰盛的可视化展示模式

图表是 BI 产品中最罕用的数据可视化工具之一。通过图表，用户能够更直观地理解数据的趋势、关系和散布。常见的图表类型包含折线图、柱状图、饼图、散点图等等。不同的图表类型实用于不同的数据类型和剖析目标。例如，折线图能够展现工夫序列数据的趋势，柱状图能够比拟不同类别的数据，饼图能够显示数据的占比等等，抉择适宜的图表类型对于用户了解数据十分重要。

可视化展示模式

  1. 统计图表

在 DataWind 产品中，为用户提供了丰盛的图表类型供用户应用，其中包含柱状图、条形图、折线图、面积图、双轴图、饼图、环形图、玫瑰图、散点图、填充地图、散点地图、词云图、直方图、雷达图、漏斗图、指标卡、仪表图、进度图、瀑布图等，以及关系图表类型桑基图。

DataWind 比拟具备特色的是 组合图表 与透视图表。

组合图表能够将多个笛卡尔坐标系下的图表并列展现，不便用户对雷同维度下的不同指标进行比照察看，组合图岂但提供根底图表的组合，还提供了与双轴图得组合。

而透视图表是用来察看一个整体的数据在多个维度下的切分的后果，反映在图表上就是具备树状构造的图表展现。用户能够通过引入细分的维度，察看数据在不同分面中的特色和趋势，从而从更细粒度上理解数据中蕴含的信息。

（组合图表及透视图表）

  1. 表格

在 DataWind 中，除了根底了二维表格渲染以外，还为用户在单元格内提供条件格局的性能，包含渲染图标集、色阶、数据图等场景，以及将单元格渲染为图片、视频、链接、迷你图表等需要。并且反对在表头上进行排序、固定列、字段配置等性能菜单。

DataWind 反对了 透视表格 的制作，透视表将数据依照列维度、行维度进行汇总计算和展示。通过简略地配置列维度、行维度和指标，即可展现出透视表。与表格相比，透视表将维度辨别成了行与列，在多维度状况下更利于表格出现。并且同时反对了条件格局、内容渲染等二维表反对的特色性能。

此外 DataWind 还为用户提供了 趋势剖析表 的性能，趋势剖析表能够反对查看外围指标按不同日期粒度聚合的数据，并能够对单个指标进一步的作比照、看趋势、求均值。

  1. Gis 地图

DataWind 提供了 Gis 地图 来反对 LBS 需要，其中包含热力地图、散点地图、飞线地图、柱状地图等。

实现揭秘

DataWind 中丰盛的可视化展示模式得益于开源可视化解决方案 VisActor，DataWind 重度应用了图表组件 VChart 和 多维表格组件库 VTable。

同时 DataWind 研发团队与 VisActor 团队深度单干，参加开源建设，使得一些个性化需要能够失去疾速满足。

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 反对在多个层面上灵便配置图表格调。

在图表层面，反对一键替换图表的数据色板：

在仪表盘层面，则反对为仪表盘整体设置对立的主题款式。

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）

简略易用的交互模式

DataWind 交互模式

除了设计好的图表外，图表的交互性也十分重要。通过图表的交互性能，用户能够更深刻地理解数据，进行更简单的剖析和摸索。

提示信息

当用户将鼠标悬停在图表上时，能够显示数据的详细信息和标签。即触发图表提示信息（Tooltip）。DataWind 反对用户对 Tooltip 进行富文本渲染，甚至反对了 tooltip 内渲染图表的能力。

缩放和平移

用户能够通过缩放和平移图表来查看更具体的数据。

抉择和过滤

用户能够抉择特定的数据点或区域，并对数据进行过滤和筛选。

上卷下钻

VisActor 中的大量组件都容许业务进行交互行为的定义，例如图元的点击、框选、悬停；数轴的缩放、选中；提示信息的展现、自定义；图例的选中、勾销等。

通过 VisActor 提供的图表事件，DataWind 实现了图表的摸索式剖析。例如上卷下钻、图表标注、参考预警等性能。

实现揭秘

DataWind 中交互性能大部分基于 VisActor 提供的各种自定义扩大能力，上面举例说明。

VisActor 内置反对的 Tooltip 性能有肯定的自定义能力，同时还反对齐全自定义渲染 tooltip。DataWind 便是利用了该能力进行 tooltip 高级定制。

通过 VisActor 提供的具体全面的交互事件，DataWind 得以基于这些事件开发对应的数据摸索式剖析流程。

// 注册事件
chart.on(event: string, callback: (params: EventParams) => void): void;
chart.on(event: string, query: EventQuery, callback: (params: EventParams) => void): void;
// 卸载事件
chart.off(event: string, callback: (params: EventParams) => void): void;

如以上接口所示：通过 query 参数锁定产生交互的组件，通过 event 明确交互事件的类型。依据以上接口即可取得用户在图表上进行的具体交互行为。具体设置参考 VisActor 事件介绍：https://visactor.io/vchart/api/API/event。

以下演示了托管鼠标 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();}
});

成果如下：

（残缺示例：https://visactor.io/vchart/demo/tooltip/custom-tooltip-handler）

在 BI 中须要将用户对行为解析为具体的业务行为，例如点击图元产生的具体行为可能包含：图表联动、上卷下钻、维度下钻、图表标注、跳转等许多性能，通过提取事件外部的具体参数以及制订多个事件间的优先级，即可设定事件的触发规定。

此外有些业务行为是多个行为的叠加组合而来，例如：图表下钻行为，须要在交互事件触发时同时进行图表维度的更换和范畴的筛选两步行为即可实现。

因而，简单的业务行为能够通过多个根底事件的组合与叠加实现，这样岂但能够使交互逻辑清晰，也能够升高继续的保护老本。

灵便、活泼的叙事成果

DataWind 叙事

DataWind 能够借助仪表盘进行灵便的可视化叙事。在单个图表中，DataWind 的叙事重点次要是数据标注。通过数据标注，能够大大降低用户浏览图表、报告或者仪表盘的老本，疾速获取洞察含意。

实现揭秘

VisActor 的弱小叙事能力为其提供了撑持。例如在图表中增加自定义数据标注：

外围代码如下：

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 也能够通过动静图表和动画等性能进行独立叙事。例如用带有自动播放进度条的图表示意数据随工夫迁徙：

（残缺示例：https://www.visactor.io/vchart/demo/storytelling/timeline-sca…)

以及和 VRender 联合，出现更简单的图表叙事成果：

（残缺示例：https://www.visactor.io)

懂数据更懂用户的智能举荐

DataWind 图表举荐

智能化是 BI 产品的发展趋势。当图表中的字段确定后，抉择适合的图表类型对数据进行展现，对于疾速获取数据中的洞察信息具备非常重要的意义。DataWind 中的图表举荐包含图表类型的举荐和图表字段的举荐。前者可能依据以后抉择的维度和指标字段，举荐最适宜进行数据展现的图表类型；后者可能在用户切换图表类型时，主动将数据字段调配到适合的视觉通道上，极大地加强用户进行摸索式剖析的能力，轻松制作可视化报表。

（DataWind 图表举荐演示）

实现揭秘

@VisActor/VChart 提供从数据到展示的全流程解决方案，以“可视化叙事”及“智能化”为外围竞争力。大语言模型弱小的生成能力为 VChart 提供了一个自然语言的交互接口，容许用户通过自然语言间接调用 VChart 的各项能力，简略、疾速、高质量地实现图表生成与编辑。

@VisActor/VMind 是基于 VChart 和大语言模型的图表智能模块，提供图表智能举荐、智能配色、对话式图表编辑等能力，可能极大地升高 VChart 的应用门槛，进步用户创作数据可视化作品的效率。

VMind 中的图表智能举荐性能可能基于数据个性和用户用意，实现字段筛选、图表类型举荐、视觉通道映射、图表配色，从无到有生成数据图表。

调用 VMind 组件代码示例如下：

import VMind from '@visactor/VMind'

const vmind = new VMind(openAIKey) // 传入 openAI key
const data=` 品牌名称, 市场份额, 平均价格, 净利润
Apple,0.5,7068,314531
Samsung,0.2,6059,362345
Vivo,0.05,3406,234512
Nokia,0.01,1064,-1345
Xiaomi,0.1,4087,131345
`
const describe="展现各品牌市场占有率，森林格调"
// 传入 csv 格局的数据和图表形容，返回图表 spec 和图表动画时长
const {spec, time} = await vmind.generateChart(data, describe); 
// 调用 VChart 进行渲染
const vchart = new VChart(spec, { dom: CONTAINER_ID});
vchart.renderAsync();

谋求极致性能

VisActor 性能体验

得益于可视化渲染引擎 VRender 的优越性能以及多种优化策略，VChart 与 VTable 提供了卓越的渲染性能以及晦涩的交互体验。

VChart 提供了 LTTB 的降采样计划，通过较少数据量的数据点放弃了原始数据的视觉个性，从而升高渲染的计算累赘。

除此之外，VChart 还反对渐进式渲染以防止大量图形的绘制导致的页面卡顿。通过渲染工作拆分，VChart 将创立好的图形元素搁置在多个帧内执行渲染，从而防止过长的同步计算工作阻塞住页面逻辑，使得图表出现晦涩自若。VChart 反对在任意图表中开启渐进式渲染配置，以柱状图为例：

该示例外围代码如下：

const spec = {
  type: 'common',
  data: [...],
  series: [
    {
      data: {id: 'data0'},
      type: 'bar',
      xField: 'time',
      yField: 'value',
      /** 是否开启大数据渲染模式，开启后会升高渲染的精度 */
      large: false,
      /** 开启大数据渲染优化的阀值，对应的是 data 的长度; 举荐 largeThreshold < progressiveThreshold  */
      largeThreshold: 500,
      /** 分片长度 */
      progressiveStep: 100,
      /** 开启分片渲染的阀值，对应的是单系列 data 的长度 */
      progressiveThreshold: 1000,
    },
 ...
  ],
};

（残缺代码：https://visactor.bytedance.net/vchart/guide/tutorial_docs/Pro…）

VTable 反对大数据量的秒级渲染，可能疾速展现宏大的数据内容。即便面对百万级数据，VTable 也能提供高效的渲染以及自在的交互体验：

（体验地址：https://visactor.io/vtable/demo/performance/100W）

DataWind 性能优化计划

除了 VisActor 自身的高性能渲染以外，VisActor 还提供了 Web Worker 和图表调度技术来晋升图表的并行渲染能力，以避免阻塞导致页面掉帧、卡顿。

VisActor 为了充分利用 CPU 多核性能，反对应用 Web Worker 进行图表并行渲染，通过 Web Worker 岂但能够充分利用客户端性能，也能够从本源上防止页面阻塞。DataWind 在此基础上封装了 Worker Pool 组件，模仿线程池概念，实现 Worker 的调度和复用。

此外，DataWind 还开发了图表调度器，用于图表渲染的异步调度工作，当页面在短时间内同时进入大量的渲染工作时，图表调度器将会依照图表优先级以及外部策略，顺次有序的进行渲染工作的调度与调配，并且会将反复的屡次有效渲染工作勾销或合并，升高渲染的性能开销。

敌对、丝滑的跨端体验

随着挪动设施的遍及，越来越多的用户须要在挪动设施上应用 BI 产品。挪动端环境下的 BI 产品须要思考以下因素：

  • 响应式设计：BI 产品的界面应该具备响应式设计，以适应不同大小的挪动设施屏幕。图表中的各个元素也须要进行自适应布局
  • 挪动端适配：BI 产品中图表的渲染、事件等都须要针对挪动端进行专门适配
  • 挪动端优化：BI 产品的界面和性能应该针对挪动设施进行优化。例如，图表中数据的展现模式、各组件的布局形式都须要针对挪动端进行专门优化。

DataWind 挪动端体验

DataWind 中的图表和仪表盘均完满适配了挪动端场景，随时随地查看数据报表，突破工夫与空间的壁垒。

实现揭秘

得益于图形渲染库 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-term…）

总结

将来，随着技术的倒退和用户需要的一直增长，BI 产品对可视化的需要在交互、易用性、智能化、叙事特色等方面都会一直发生变化，要求会越来越高。

VisActor 作为一款收费开源可视化解决方案，通过火山引擎海量实在用户场景的验证和打磨。在功能性、好看性、性能、跨端反对度上都做到了十分好的成果，可能很好的助力业务实现可视化能力的加强和落地。

DataWind 拥抱开源，与 VisActor 严密单干，互相配合，为开源产品在商业场景中的落地做了很好的示范。

欢送交换

咱们违心和数据产品相干产品经理、设计师、研发同学一起做更加深刻的探讨和交换：

  1. 如果你对某一个方面细节的的解决方案感兴趣，须要进一步交换能够分割咱们。
  2. 如果你违心分享你的产品、场景和教训，能够分割咱们。
  3. 如果你在可视化利用过程中有难解的问题，能够分割咱们一起探讨、钻研。

联系方式：

1）VisActor 微信订阅号留言（能够通过订阅号菜单退出微信群）：

2）VisActor Discord 社群：https://discord.gg/3wPyxVyH6m

3）VisActor 官网及 github：https://www.visactor.io/

https://github.com/visactor

退出移动版