导读

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. 【翻译】高效numpy指北

    ref:link why numpy 运算高效 numpy 内存结构 一块内存区域 dtype 确定了内存区域数据类型 metadata 比如 shape.strides etc 注:numpy 内存 ...

  2. 【python基础】文件-初识文件

    文本文件可存储的数据量是非常多的.每当需要分析或修改存储在文件中的信息时,首先就是读取文件到内存中,为此可以一次性读取文件的全部内容,也可以以每次一行的方式逐步读取. 1.读取文件 1.1读取整个文件 ...

  3. 续《基于C# 开发的SOL SERVER 操作数据库类（SQLHelp》 ——第二弹

    续上一节,本节给出SQLHelp的具体实现方法--<YSFSQLHelp>,个人根据自己需要新建适合的类,本节根据参考网上资料,根据自己的需要编写的SQL帮助类.下面直接给出具体实现: / ...

  4. 即构推出低延迟直播产品L3，可将直播延迟降到1s

    近日,全球云通讯服务提供商ZEGO即构科技推出低延迟直播产品Low-Latency Live,简称L3.这款产品对传统CDN直播中"延迟较大.弱网抗性差.观众端内容不同步"等问题进 ...

  5. Prompt Playground： 一个简易的提示词调试工具

    Prompt Playground: 一个简易的提示词调试工具 将LLM引入到日常的开发工作中后,会面临大量的提示词调试的工作,由于LLM不确定性,这个工作会变得非常的繁琐,需要不断的调整,甚至需要大 ...

  6. 堆栈式 CMOS、背照式 CMOS 和传统 CMOS 传感器的区别

    光电效应 光电效应的现象是赫兹(频率的单位就是以他命名的)发现的,但是是爱因斯坦正确解释的.简单说,光或某一些电磁波,照射在某些光敏物质会产生电子,这就是光电效应. 这就将光变为了电,光信号的改变会带 ...

  7. 个人博客迁移到托管平台Netlify

    Netlify是一家国外的静态网站的托管平台,提供免费的https,自动化部署和升级,可以监控GitHub.GitLab或者Bitbucket做到自动更新发布. 个人体会访问速度不是很理想,不如部署在 ...

  8. 内核源码中单个.o文件的编译过程（六）

    通过对过渡篇的学习,相信你已经具有了相当的知识储备,接下来就来继续学习单个.o文件的编译过程 以/drivers/char/mem.c的编译为例 make /drivers/char/mem.o 一. ...

  9. Python数据分析易错知识点归纳（一）：基础知识

    一.python基础 字符串replace方法 txt = txt.replace(s, ' ') # 光是txt.replace(s, ' ')是不会对txt产生影响的 # 下面每次循环replac ...

  10. upload-libs通关攻略

    pass01 第一关是一个前端验证,只要把Javascript禁止再上传就可以绕过了. 上传成功,到上传的地址查看结果如下: pass-02 这是一个MIME绕过,用bp抓包后修改文件类型即可将下面这 ...