导读

VTable: 不只是高性能的多维数据分析表格，更是行列间创作的方格艺术家！

VTable是字节跳动开源可视化解决方案 VisActor 的组件之一。

在现代应用程序中，表格组件是不可或缺的一部分，它们能够快速展示大量数据，并提供良好的可视化效果和交互体验。VTable是一款基于可视化渲染引擎VRender的高性能表格组件库，为用户提供卓越的性能和强大的多维分析能力，以及灵活强大的图形能力。

快速上手

获取 VTable

你可以通过以下几种方式获取 VTable。

使用 NPM 包

首先，你需要在项目根目录下使用以下命令安装 VTable：

 
bash

复制代码
# 使用 npm 安装

npm install @visactor/vtable

# 使用 yarn 安装

yarn add @visactor/vtable

使用 CDN

你还可以通过 CDN 获取构建好的 VTable 文件。

 
xml

复制代码
<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>

引入 VTable

通过 NPM 包引入

在 JavaScript 文件顶部使用 import 引入 VTable：

 
javascript

复制代码
import * as VTable from '@visactor/vtable';

or

import {ListTable, PivotTable, TYPES, themes}  from '@visactor/vtable';

使用 script 标签引入

通过直接在 HTML 文件中添加 <script> 标签，引入构建好的 vtable 文件：

 
xml

复制代码
<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>

<script>

const tableInstance = new VTable.ListTable(option);

</script>

绘制一个简单的表格

在绘图前我们需要为 VTable 准备一个具备高宽的 DOM 容器。

 
css

复制代码
<body>

  <div id="tableContainer" style="width: 600px;height:400px;"></div>

</body>

接下来，我们创建一个 Vtable.ListTable 实例，传入表格配置项：

 
js

复制代码
const records = [

{

      "230517143221027": "CA-2018-156720",

      "230517143221030": "JM-15580",

      "230517143221032": "Bagged Rubber Bands",

      "230517143221023": "Office Supplies",

      "230517143221034": "Fasteners",

      "230517143221037": "West",

      "230517143221024": "Loveland",

      "230517143221029": "2018-12-30",

      "230517143221042": "3",

      "230517143221040": "3.024",

      "230517143221041": "-0.605"

  },

  {

      "230517143221027": "CA-2018-115427",

      "230517143221030": "EB-13975",

      "230517143221032": "GBC Binding covers",

      "230517143221023": "Office Supplies",

      "230517143221034": "Binders",

      "230517143221037": "West",

      "230517143221024": "Fairfield",

      "230517143221029": "2018-12-30",

      "230517143221042": "2",

      "230517143221040": "20.72",

      "230517143221041": "6.475"

  },

  (...)

];

const columns =[

    {

        "field": "230517143221027",

        "title": "Order ID",

        "width": "auto"

    },

    {

        "field": "230517143221030",

        "title": "Customer ID",

        "width": "auto"

    },

   (...)

];

const option = {

  records,

  columns,

  widthMode:'standard'

};

// 创建 VTable 实例

const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);

效果如下：

详细代码见：visactor.io/vtable/guid…

流畅的性能体验

VTable采用可视化渲染引擎VRender进行封装，提供了卓越的性能和渲染效果。VTable支持百万级数据的秒级渲染，可以快速展示大量数据。下面我们来看一个例子，展示VTable的快速渲染能力。也可转到官网亲自体验：visactor.io/vtable/demo…

多种表格形态

VTable提供了三种主要的表格形态，包括基本表格、多维透视表格和透视组合图。可以满足不同用户的需求，帮助用户更好地展示和分析数据，并从中发现有价值的信息。

  • 基本表格是最简单的表格形态，它由行和列组成，每个单元格包含一个数据项。基本表格适用于对数据进行简单的排列和展示。
  • 透视表格是一种用于多维数据分析的表格形态，它可以将数据按照多个维度进行聚合和汇总，为用户提供多角度的数据分析和探索。
  • 透视组合图是一种将多维透视表格与其他图表形式（如柱状图、折线图等）结合起来的图表形态，它可以将透视表格中的数据转化为更直观、易懂的图形展示。

同时基本表格可以形变为转置****表格，还可以用树形结构展示层次关系：

透视表的行表头也可用树形结构展示维度间层级关系：

丰富的单元格呈现形式

VTable提供了多种单元格呈现形式，可以满足不同的数据展示需求，帮助用户更好地呈现和分析数据。

具体支持的单元格呈现形式有：

  1. 'text'文本类型：用于展示文字数据。同时支持多种样式和格式，如字体大小、颜色、加粗、斜体、自动换行等，也可对数据进行格式化，来满足不同的排版需求。
  2. 'link'链接类型：将数据转化为超链接，点击链接可以跳转到指定的网页或文件
  3. 'image'图像类型：将有效url转化为图像展示，如照片、图标等。
  4. 'video'视频类型：将有效url转化为视频展示，如YouTube视频、本地视频文件等。
  5. 'sparkline'迷你图类型：将数据转化为小型图表展示，如折线图、面积图，在表格中展示数据趋势和变化。
  6. 'progressbar'进度条类型：将数据转化为进度条展示，可自定义进度条颜色、大小和文本，可以方便地在表格中展示任务进度和状态。
  7. 'chart'图表类型：将数据转化为VChart图表在单元格中展示。
  8. 自定义渲染：如果想要单元格呈现更为丰富的内容或布局形态，还可以通过自定义渲染来实现。

全面的交互能力

VTable提供了丰富全面的交互能力。

表格交互

交互类型包括：选中单元格，hover高亮，拖拽换位，排序，冻结列，调整列宽等。

组件级交互

交互类型包括：滚动条滚动，tooltip提示，dropdown下来菜单弹出等。

如果上述交互还不能满足需求，可以结合event事件监听来自定义交互行为。

灵活多样的UI风格

VTable支持多种主题和样式，可以根据用户的需求进行自定义设置，以满足不同的视觉效果。

多套theme主题

单元格style

除了使用theme来设置样式外，还可以通过列维度或者行维度的配置style来设置单元格样式，可以达到单元格级别自定义样式的灵活程度。

用户CASES

结语

VTable是一款基于可视化渲染引擎VRender的高性能表格组件库，提供了卓越的性能和强大的多维分析能力，以及灵活强大的图形能力。VTable支持百万级数据的快速运算和渲染，可以自动分析和呈现多维数据，无缝融合VChart，为用户提供了强大的数据分析和可视化能力。VTable提供了丰富的功能，包括多种表格类型、单元格内容类型、交互功能、主题、样式、自定义渲染等，以满足用户的各种需求。如果你正在寻找一款高效、易用的数据表格库，VTable是一个不错的选择！

我们愿意和数据产品相关产品经理、设计师、研发同学一起做更加深入的探讨和交流：

  1. 如果你对某一个方面细节的的解决方案感兴趣，需要进一步交流可以联系我们。
  2. 如果你愿意分享你的产品、场景和经验，可以联系我们。
  3. 如果你在可视化应用过程中有难解的问题，可以联系我们一起讨论、研究。

联系方式：

1）VisActor 微信订阅号留言（可以通过订阅号菜单加入微信群）：

二维码

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

3）VisActor 官网：www.visactor.io/vtable

4）欢迎Star github.com/visactor/vt…

 

VTable——不只是高性能的多维数据分析表格的更多相关文章

  1. spring boot高性能实现二维码扫码登录(中)——Redis版

    前言 本打算用CountDownLatch来实现,但有个问题我没有考虑,就是当用户APP没有扫二维码的时候,线程会阻塞5分钟,这反而造成性能的下降.好吧,现在回归传统方式:前端ajax每隔1秒或2秒发 ...

  2. spring boot高性能实现二维码扫码登录(下)——订阅与发布机制版

     前言 基于之前两篇(<spring boot高性能实现二维码扫码登录(上)——单服务器版>和<spring boot高性能实现二维码扫码登录(中)——Redis版>)的基础, ...

  3. 使用 Docker 和 Nginx 打造高性能的二维码服务

    使用 Docker 和 Nginx 打造高性能的二维码服务 本文将演示如何使用 Docker 完整打造一个基于 Nginx 的高性能二维码服务,以及对整个服务镜像进行优化的方法.如果你的网络状况良好, ...

  4. SSAS 第一篇：多维数据分析基础

    多维数据分析是指按照多个维度(即多个角度)对数据进行观察和分析,多维的分析操作是指通过对多维形式组织起来的数据进行切片 .切块.聚合.钻取 .旋转等分析操作,以求剖析数据,使用户能够从多种维度.多个侧 ...

  5. python练习 - 系统基本信息获取（sys标准库）+ 二维数据表格输出（tabulate库）

    系统基本信息获取 描述 获取系统的递归深度.当前执行文件路径.系统最大UNICODE编码值等3个信息,并打印输出.‪‬‪‬‪‬‪‬‪‬‮‬‫‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‪‬‪‬‪‬‪‬‪‬‪‬‮ ...

  6. Python二维数据分析

    一.numpy二维数组 1.声明 import numpy as np #每一个[]代表一行 ridership = np.array([ [ 0, 0, 2, 5, 0], [1478, 3877, ...

  7. spring boot高性能实现二维码扫码登录(上)——单服务器版

    前言 目前网页的主流登录方式是通过手机扫码二维码登录.我看了网上很多关于扫码登录博客后,发现基本思路大致是:打开网页,生成uuid,然后长连接请求后端并等待登录认证相应结果,而后端每个几百毫秒会循环查 ...

  8. 分布式大数据多维数据分析(olap)引擎kylin[转]

    Apache Kylin是一个开源的分布式分析引擎,提供Hadoop之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay 开发并贡献至开源社区.它能在亚秒内查询巨大的Hiv ...

  9. 数据分析之Numpy基础：数组和适量计算

    Numpy(Numerical Python)是高性能科学计算和数据分析的基础包. 1.Numpy的ndarray:一种多维数组对象 对于每个数组而言,都有shape和dtype这两个属性来获取数组的 ...

  10. 《利用python进行数据分析》NumPy基础：数组和矢量计算 学习笔记

    一.有关NumPy (一)官方解释 NumPy is the fundamental package for scientific computing with Python. It contains ...

随机推荐

  1. 在命令行按下tab键之后, 发生了生么?

    1. 引言 2. complete命令 3. 自定义补全列表 4. 动态补全列表 5. compgen命令 6. 别名的自动补全 7. 补全规则永久生效 8. 自动加载 9. 参考 1. 引言 当我们 ...

  2. 本地python调试 问题笔记

    ImportError: cannot import name 'int_classes' from 'torch._six' 把  "from torch._six import stri ...

  3. Sentieon | 每周文献-Population Sequencing-第一期

    群体基因组系列文章-1 标题(英文):The Impact of ACEs on BMI: An Investigation of the Genotype-Environment Effects o ...

  4. 关于Java已死，看看国外开发者怎么说的

    博主在浏览 medium 社区时,发现了一篇点赞量 1.5k 的文章,名称叫<Java is Dead - 5 Misconceptions of developers that still t ...

  5. 脱发秘籍：前端Chrome调试技巧汇总

    Chrome浏览器调试工具的核心功能: 注:本文测试.截图均为Edge浏览器(内核是Chromium),浏览器内核可了解<有哪些浏览器/内核?> 00.基础操作汇总 操作类型 快捷键/说明 ...

  6. 代码发布平台jenkins中Check-out Strategy选项功能意义

    第一个选项:Use'svn update' as much as possible  这个选项能实现快速发布:Use 'svn update' whenever possible, making th ...

  7. JavaScript中this的绑定

    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path s ...

  8. 【线上技术分享】即构&MobTech袤博移动游戏开发者全能进阶沙龙

    游戏行业的兴起与当前移动互联网用户碎片化.休闲化的生活特征密不可分,在用户旺盛的需求下,游戏行业迎来了绝佳的发展机遇,今年上半年已多款游戏DAU过亿. 市场的火爆也为游戏行业带来了异常激烈的竞争,加上 ...

  9. Maven-Could not calculate build plan错误解决方法

    报错如图: 报错情况: 可以创建简单的maven项目例子,但是无法创建web的maven项目 解决方法: 1.安装maven插件后,c盘下会生成.m2文件夹 .m2\repository\org\ap ...

  10. Redis理论

    什么是Redis Redis(Remote Dictionary Server)是使用C语言编写的,开源的(BSD许可)高性能非关系型(NoSQL)的键值对数据库. Redis可以存储键和五种不同类型 ...