导读

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. 解决QRCODE生成的二维码微信长按不识别问题

    问题描述 QRcode 生成二维码,展示到页面,微信打开,长按二维码没反应.而直接放二维码图片上去可以识别. 问题原因 手机兼容问题qrcode在页面生成二维码时,会生成一个canvas标签和一个im ...

  2. 前端Vue图片上传组件支持单个文件多个文件上传 自定义上传数量 预览删除图片 图片压缩

    前端Vue图片上传组件支持单个文件多个文件上传 自定义上传数量 预览删除图片 图片压缩, 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin? ...

  3. Docker和Kubernetes与容器自动化扩展：最佳实践

    目录 1. 引言 2. 技术原理及概念 2.1 基本概念解释 2.2 技术原理介绍 2.3 相关技术比较 3. 实现步骤与流程 3.1 准备工作:环境配置与依赖安装 3.2 核心模块实现 3.3 集成 ...

  4. 一文读懂什么是AIGC？

    目录 AIGC概念 AIGC发展历史 在早期萌芽阶段(1950s~1990s) 在沉淀累积阶段(1990s~2010s) 在快速发展阶段(2010s~至今) ChatGPT AIGC能做什么? 电子商 ...

  5. Django自身提供测试类、工具-调研

    Django自身提供测试类.工具 django.test.Client 他的作用是模拟客户端.提供一系列的方法,例如get.post.delete.login等其中login是用django自身的验证 ...

  6. 统信UOS系统开发笔记（八）：在统信UOS上编译搭建mqtt基础环境(版本使用QMQTT::Clinet)

    前言   统信uos使用到mqtt开发,需要重新编译mqtt,本篇描述统信uos20上的mqtt源码编译和环境搭建.   注意   这里下载的mqtt版本与其他几篇文章的不同,这里是使用QMQTT:: ...

  7. 手把手教你自定义自己SpringBoot Starter组件源码剖析

    我们知道SpringBoot Starter也就是启动器.是SpringBoot组件化的一大优点.基于这个思想,基于这个思想SpringBoot 才变得非常强大,官方给我们提供很多开箱即用的启动器. ...

  8. TCP/IP网络体系结构中，各层的作用，以及各层协议的作用。

    1.[TCP/IP]协议中每层的作用 从协议分层模型方面来讲,TCP/IP由四个层次组成:数据链路层(网络接口层).网络层.传输层.应用层 TCP/IP网络体系结构中,各层作用: 1.网络接口层:负责 ...

  9. Button按钮：得到鼠标焦点后自动放大，失去鼠标焦点后自动缩小_

    作用 程序设计过程中,我们经常需要增加一些动态效果,以此改善用户的使用体验.本文将介绍一种方法,动态显示按钮状态,使其得到鼠标焦点后自动放大,失去鼠标焦点后自动缩小. 效果图 先放一张原图(鼠标还未移 ...

  10. AI回答打鸟问题

    GPT-3.5 树上有9只鸟,猎枪打下来1只,还剩几只? 如果猎枪打下来1只鸟,那么树上剩下的鸟应该是8只.