原文链接,作者玄魂
项目官网:https://www.visactor.io/vchart
VChart 不只是开箱即用的多端图表库,更是生动灵活的数据故事讲述者。
VChart 是字节跳动开源可视化解决方案 VisActor 的核心图表组件库。它基于可视化语法库 VGrammar 和渲染引擎 VRender 进行封装,在满足数据呈现的同时,还支持面向叙事场景的动画编排、丰富的交互能力和定制化的图表风格,简单易用的配置大大降低了用户的学习成本。
你可以通过以下几种方式获取 VChart。
首先,你需要在项目根目录下使用以下命令安装 VChart:
# 使用 pnpm 安装
pnpm add @visactor/vchart
# 使用 npm 安装
npm install @visactor/vchart
# 使用 yarn 安装
yarn add @visactor/vchart
你还可以通过 CDN
获取构建好的 VChart 文件。将以下代码添加到 HTML
文件的 标签中:
<script src="https://unpkg.com/@visactor/vchart/build/index.min.js">script>
在 JavaScript
文件顶部使用 import
引入 VChart:
import VChart from '@visactor/vchart';
script
标签引入通过直接在 HTML
文件中添加 标签,引入构建好的 vchart 文件:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/@visactor/vchart/build/index.min.js">script>
head>
html>
在绘图前我们需要为 VChart 准备一个具备高宽的 DOM
容器。
<body>
<div id="chart" style="width: 600px;height:400px;">div>
body>
接下来,我们创建一个 VChart 实例,传入图表配置项和 DOM
容器的 ID:
const spec = {
data: [
{
id: 'barData',
values: [
{ month: 'Monday', sales: 22 },
{ month: 'Tuesday', sales: 13 },
{ month: 'Wednesday', sales: 25 },
{ month: 'Thursday', sales: 29 },
{ month: 'Friday', sales: 38 }
]
}
],
type: 'bar',
xField: 'month',
yField: 'sales'
};
// 创建 vchart 实例
const vchart = new VChart(spec, { dom: 'chart' });
//如果是cdn 引入,使用
const vchart = new VChart.default(spec, { dom: 'chart' });
// 绘制
vchart.renderAsync();
至此,成功绘制出了一个简单的柱状图!
效果如下:
代码详见:https://visactor.io/vchart/guide/tutorial_docs/Getting_Started
VChart 在 VGrammar 的基础上,首先面向传统统计图表应用,基于已有的业务沉淀,覆盖常见的图表类型。
基于自研渲染引擎 VRender,VChart 提供了全新的 3D 图表类型,供用户在三维可视化场景下使用。
示例地址:https://visactor.io/vchart/demo/chart-3d/pie3d
示例地址:https://visactor.io/vchart/demo/chart-3d/scatter3d
示例地址:https://visactor.io/vchart/demo/chart-3d/wordcloud3d
示例地址:https://visactor.io/vchart/demo/chart-3d/line3d
示例地址:https://visactor.io/vchart/demo/chart-3d/area3d
示例地址:https://visactor.io/vchart/demo/chart-3d/bar3d
针对典型的叙事场景,VChart 抽象出简单易用的模版图表,只需简单配置就可以生成叙事作品。
示例地址:https://www.visactor.io/vchart/demo/example/area-chart/storytelling/timeline-scatter
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.io/vchart/guide/tutorial_docs/Progressive_Render
动画在可视化中的重要性不可低估,通过动画,数据可以以生动的方式呈现,从而更好地诉说数据背后的故事。而讲好数据故事也是 VChart 的初心,为此我们设计并实现了全新的动画语法。
就渲染时机而言,它分为:入场动画、更新动画、退场动画、常态动画;其中更新动画又可以分为:数据更新动画、系列配置更新动画。
就动画作用域而言,它分为图元动画、全局形变动画等。
在 VChart 中,内置了一些通用的动画类型。这些动画类型可以直接在配置中使用,实现常见的图元动画效果,下面简单举几个例子。
示例地址:https://visactor.io/vchart/guide/tutorial_docs/Animation/Configuration_and_Choreography_of_Complex_Animations
示例地址:https://visactor.io/vchart/guide/tutorial_docs/Animation/Configuration_and_Choreography_of_Complex_Animations
示例地址:https://visactor.io/vchart/guide/tutorial_docs/Animation/Configuration_and_Choreography_of_Complex_Animations
根据前文描述,入场、数据更新等都比较好理解,而何为系列配置更新动画?可以理解为图表由一种类型变换到另一种类型所需要的过渡动画,图表类型的变换势必会带来元素形状的变换,基于 VGrammar 动画语法的支持,图元能够丝滑地进行形变过渡。形变动画分为:一对一动画、一对多动画和多对一动画。
示例地址:https://visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Types
示例地址:https://visactor.io/vchart/guide/tutorial_docs/Animation/Animation_Types
类似的全局形变动画在各个系列切换中都可以实现:
为了更好的编排和展示图表的不同状态,我们提供动画时长、动画延长开始时长、动画缓动效果和依次执行等配置,精准把握时间节点和播放速度。除此之外,我们支持多个并行动画时间线以及时间线内部的串行动画,不同图表类型间切换的过渡动画, 这些都大大提升了动画编排能力,支持更丰富的叙事场景。
示例地址: https://visactor.io/vchart/demo/storytelling/weekly-activity
示例地址:https://visactor.io/vchart/guide/tutorial_docs/Animation/Configuration_and_Choreography_of_Complex_Animations
通过播放器组件,可以实现播放、暂停播放、前进、后退等基本操作,帮助用户更好地控制动画的演进。
示例地址:https://visactor.io/vchart/demo/storytelling/dynamic-comparative-bar-chart
VChart 包含功能强大的组件体系,包括:轴、图例、标注、提示信息、框选、十字准星、缩略轴、滚动条、指标卡、标签、播放器、标题,用户可以通过简单的一句配置为图表赋予更丰富的数据细节、更简单的交互操作和更自由的动画播放。除此之外,我们基于底层渲染引擎 VRender 封装的高性能组件体系,并与 VChart 图表业务逻辑进行解耦,绕开不必要的流程,做到更纯净、更高效。
在 VChart 中,提示信息不限于文字,通过 tooltip handler
您可以自定义任何形式的细节信息。
示例地址:https://visactor.io/vchart/demo/tooltip/custom-tooltip-handler
在 VChart 中,图例的种类包括但不限于枚举和筛选类别信息的离散图例,还包含表现数值映射关系和按值筛选的连续图例、表现颜色映射关系和按值筛选的颜色图例。
示例地址:https://visactor.io/vchart/demo/legend/continuous
在 VChart 中,十字准星不止以“十字”的形式存在于笛卡尔坐标系,在极坐标系场景下也能以弧线、射线或扇形的形式准确指示鼠标所在位置。
示例地址:https://visactor.io/vchart/demo/crosshair/polar-line
在 VChart 中,缩略轴不再是直角坐标轴的专属控制器,它拥有的数据筛选和统计能力同样应用于极坐标系。
示例地址:https://visactor.io/vchart/demo/data-zoom/data-zoom-polar
在 VChart 中,标签的布局将更合理,有限空间下的标签防重叠逻辑也将避免凌乱的信息表达。
示例地址:https://visactor.io/vchart/demo/marker/mark-line-basic
在 VChart 中,标注被划分为标注线、标注区域和标注点,它们的作用也不限于针对单个数据元素的标注,而是在此之上进行拓展: 多个数据元素的聚合、回归计算;跨越布局单元的数据标记;数据坐标轴空间的定位标记;任意位置的定位标记;标注内容的多样化格式。
示例地址:https://visactor.io/vchart/demo/marker/mark-point-basic
VChart 可以自动适配桌面、H5、多个小程序环境,这意味着开发者只需要编写一次代码,就可以在多个平台上运行,大大提高了开发效率。
针对目前市面上的各种跨端环境(主要是 node
,各种小程序等),VChart 的底层渲染引擎 VRender 对各个环境上的 API 差异做了收拢抹平,所以在 VChart 这一层,用户只需要在 new VChart
实例的时候,配置 mode
参数来确定使用哪一种环境即可。
目前支持的跨端环境有:
具体使用教程见:https://visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/how
我们从不认为图表是一个独立的个体,它由可复用的各种组件、数据系列组装而成。每个组件、数据系列都有着自己的容器,如何对这些容器合理布局一度成为可视化开发者的思考着力点。为了满足不同布局需求,VChart 支持三种布局模式,「占位布局」、「行列布局」和「自定义布局」。
占位布局会根据不同容器或组件的功能特性和对应关系进行自动匹配,无需任何配置即可得到合理的结果。
参与占位布局的元素共分为两种:
示例地址:https://visactor.io/vchart/demo/pie-chart/nested-pie
在行列布局中,需要声明布局模块、行列属性,即可将具体的图表元素绑定到对应模块上。
下面是一个简单的布局声明示例:
layout: {
type: 'grid', // 布局类型
col: 1, // 列数
row: 2, // 行数
elements: [
{
modelId: 'legend', // 布局模块id
col: 0, // 布局模块所在列
colSpan: 2, // 当前元素占几列
row: 0 // 布局模块所在行
},
{
modelId: 'Social Penetration',
col: 0,
row: 1
}
]
},
region: [
{
id: 'legend', // region所在的布局模块 id
},
{
id: 'ocial Penetration',
}
],
在图表中,除了内置的布局逻辑,用户也可以通过自定义布局接口,实现完全的自定义布局。
/**
* 注册布局
* @param layouts 布局类
*/
useLayout: (layouts: ILayoutConstructor[]) => void;
示例地址:https://visactor.io/vchart/demo/layout/custom-layout
VChart 提供更细粒度的配置选项,使您能够根据需求自定义图表、组件、系列的样式、配色方案以及其他图元属性,无论是精确到像素的微调还是全新的设计风格。
示例地址:https://visactor.io/vchart/demo/theme/theme-switch
图表的样式通常分为「色板」、「系列图元样式」、「组件样式」这三个模块。
最终将这些配置写入主题中,再通过主题的注册和切换即可实现不同场景下的图表样式效果。
示例地址:https://visactor.io/vchart/demo/theme/theme-style
实践出真知,VisActor 从实践中沉淀发展而来,同时又服务更多的场景,形成了良好的发展轨迹。下面就几个典型场景举例说明,一个好的图表库可以为产品带来的价值。
数据类产品是统计图表的核心应用领域,强大的图表能力可以为产品增加多重商业价值。
大屏产品对图表展现形式、动画以及主题提出了新的 挑战,VChart 灵活的扩展能力,可以快速满足各种定制化大屏的需求。
VChart 以其出色的数据展现和标注能力,在 Office 套件中也得到了广泛应用。
随着短视频媒体的发展,数据视频也越来越多的得到创作者的喜欢,VChart 也正在和一些视频编辑工具相结合,助力内容创作者生产更优质的数据视频内容。