VTable——不只是高性能的多维数据分析表格

最新推荐文章于 2024-08-27 19:36:59 发布
最新推荐文章于 2024-08-27 19:36:59 发布
阅读量1k 收藏 3
点赞数 1
文章标签： 数据分析 数据挖掘
原文链接：https://mp.weixin.qq.com/s?__biz=MzU0ODk0MDg4Nw==&mid=2247484852&idx=1&sn=e124e0c0bfca51c02fb7aba5d8ecfb85&chksm=fbb6388cccc1b19a4ad259d0cdf45af07bfa0757ad90e4ec662c924ed509199d3805e6b91a2e&scene=126&sessionid=0
版权

导读

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

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

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

快速上手

获取 VTable

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

使用 NPM 包

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

# 使用 npm 安装npm install @visactor/vtable# 使用 yarn 安装yarn add @visactor/vtable

使用 CDN

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

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

引入 VTable

通过 NPM 包引入

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

import * as VTable from '@visactor/vtable';orimport {ListTable, PivotTable, TYPES, themes}  from '@visactor/vtable';

使用 script 标签引入

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

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script><script>const tableInstance = new VTable.ListTable(option);</script>

绘制一个简单的表格

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

<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);

效果如下：

78b92a9eb72f257f52718603077f1537.png

详细代码见：https://visactor.io/vtable/guide/Getting_Started/Getting_Started

流畅的性能体验

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

3fd6b63bc922b618381b44aa6abe18d1.gif

多种表格形态

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

  • 基本表格是最简单的表格形态，它由行和列组成，每个单元格包含一个数据项。基本表格适用于对数据进行简单的排列和展示。

835197d170b98d1af0343676903c9fd1.png

  • 透视表格是一种用于多维数据分析的表格形态，它可以将数据按照多个维度进行聚合和汇总，为用户提供多角度的数据分析和探索。

fb9e0e9931bcdae0962adfec7449d209.png

  • 透视组合图是一种将多维透视表格与其他图表形式（如柱状图、折线图等）结合起来的图表形态，它可以将透视表格中的数据转化为更直观、易懂的图形展示。

c306d23ca6ddb26848f14aeb4337fd0f.png

同时基本表格可以形变为转置表格，

afbee7060a4f89008dd8dc7c2545f5b8.png

还可以用树形结构展示层次关系，

cdaecf61e9c76e38ea88a013d014025c.png

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

e2a1aab81001d9afdc2340bc0ac94673.png

丰富的单元格呈现形式

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

5d08372c3b3c423d1dd96c254e850bea.png

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

  1. 'text'文本类型：用于展示文字数据。同时支持多种样式和格式，如字体大小、颜色、加粗、斜体、自动换行等，也可对数据进行格式化，来满足不同的排版需求。

  2. 'link'链接类型：将数据转化为超链接，点击链接可以跳转到指定的网页或文件

  3. 'image'图像类型：将有效url转化为图像展示，如照片、图标等。

  4. 'video'视频类型：将有效url转化为视频展示，如YouTube视频、本地视频文件等。

  5. 'sparkline'迷你图类型：将数据转化为小型图表展示，如折线图、面积图，在表格中展示数据趋势和变化。

  6. 'progressbar'进度条类型：将数据转化为进度条展示，可自定义进度条颜色、大小和文本，可以方便地在表格中展示任务进度和状态。

  7. 'chart'图表类型：将数据转化为VChart图表在单元格中展示。

  8. 自定义渲染：如果想要单元格呈现更为丰富的内容或布局形态，还可以通过自定义渲染来实现。

全面的交互能力

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

表格交互

选中单元格

select cells: 支持单选，框选，选中整列，快捷键多选及全选。

2f0b9ad863719b6d56997e00171d38fa.gif

hover高亮

hover highlight: 支持hover单元格高亮，或十字高亮。

e7a72cc6f5bc2807946d6a6112fbbc7b.gif

拖拽换位

299a562f0600c4caa29fb59d368deb94.gif

排序

8174243f1755ff5db3412a834e643d12.gif

冻结列

ca160b4cfa577d08e5ef5953c6d3660d.gif

调整列宽

4af5f74ede602f47fceffe28bf97e339.gif

更多案例欢迎访问 https://www.visactor.io/vtable。

组件级交互

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

tooltip 提示

7ade9681045104ee6f54e2d0bf3c3053.gif

dropdown

b55a9195e8b9f152524ba064b27bab0c.gif

如果上述交互还不能满足需求，可以结合event事件监听来自定义交互行为。更多案例欢迎访问 https://www.visactor.io/vtable。

灵活多样的UI风格

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

多套theme主题

ARCO theme

6dc9a4e66f928a208e13823aa6ca2eeb.png

LIGHT theme

e92c3fb0a4b8560a69929f9beaa3c8b4.png

SIMPLY theme

bda89df32543d64e9ecc70fcfe1f5a4f.png

DARK theme

c0724b4a3b20acdbce58dff05462a30e.png

Custom

b27d08a05ffd5f3c3ea84e4724f88b7f.png
dbb95f24e656397904ccd3668d62b607.png

单元格style

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

用户CASES

数据分析

c7a422195c4ad56e9ce54c4a41a5795d.png

销售明细

13bc7a93132c0c81c4d9962bd8d44e5a.png

趋势分析

0582713eb6cfd6430fe6990b7b01988a.png

项目排期

76bff860bb40f22d42c0e26a00ad16a1.png

结语

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

暂时无法在飞书文档外展示此内容

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

  1. 如果你对某一个方面细节的的解决方案感兴趣，需要进一步交流可以联系我们。

  2. 如果你愿意分享你的产品、场景和经验，可以联系我们。

  3. 如果你在可视化应用过程中有难解的问题，可以联系我们一起讨论、研究。

联系方式：

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

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

3）欢迎Star(github) github.com/visactor

玄魂
关注
Java多态中的关键的技术——Vtable
kxkxyzyz的博客
12-14 1244
Vtable，计算机术语，中文译名虚函数表，简称虚表。每一个有虚函数的类都有这样一个东西。实际上记录了本类中所有虚函数的函数指针，也就是说是个函数指针数组的起始位置。Vtable虚表。比如virtual void TheSecondFun()记录在数组的第二个元素，当一个该类的对象实例调用TheSecondFun时就根据对应关系把第二个函数指针取出来，再去执行该函数，这种行为叫晚绑定，也就是说在运...
vtable演示
kongkong的专栏
11-20 565
初始数据 AA public class AA { public static final int PAGE = 20; private int num = 10; public void name(){ System.out.println("AA"); } public void add() { } } BB public class BB extends AA{ public void name(){
vue大数据表格解决方案的比较
热门推荐
草率小猿的博客
02-17 1万+
关于大数据表格的比较，包含了Ant Design、Surley Vue、vxe-table、Ag Grid等框架。
VTable：高性能多维数据分析表格的艺术大师
gitblog_00741的博客
08-12 338
VTable：高性能多维数据分析表格的艺术大师 VTableVTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.项目地址:https://gitcode.com/gh_...
vtable
hulefei29的专栏
09-23 220
 frome:http://www.learncpp.com/cpp-tutorial/125-the-virtual-table/
C/C++编译器中虚表是如何完成的 The virtual table
adermxl的专栏
09-13 3585
<br />To implement virtual functions, C++ uses a special form of late binding known as the virtual table. The virtual table is a lookup table of functions used to resolve function calls in a dynamic/late binding manner. The virtual table sometimes goes by
再谈VTable
CodeFoxTiger的专栏
04-20 779
最近十分颓废，为了改变这种状态，建议自己zai'yi'ci
VTable不仅仅是一个高性能的多维数据分析表，更是一个在行和列之间创造艺术的网格艺术家
02-22
VTable 是 VisActor 可视化体系中的表格组件库，基于可视化渲染引擎 VRender 进行封装。 核心能力如下：性能极致：支持百万级...多维分析：多维数据自动分析与呈现。表现力强：提供灵活强大的图形能力，无缝融合VChart
VTable 是 VisActor 可视化体系中的表格组件库，基于可视化渲染引擎 VRender 进行封装
05-28
VTable，不只是一款高性能的多维数据分析表格，更是一个在行列间创作的方格艺术家。VTable 是 VisActor 可视化体系中的表格组件库，基于可视化渲染引擎 VRender 进行封装。 核心能力如下：性能极致：支持百万级数据...
Vue封装的可编辑表格插件方法
10-18
该插件允许用户在表格中进行单元格编辑，并能对表头进行任意合并，从而提供了强大的表格数据处理功能。 首先，我们需要了解该插件的基本结构。插件的核心在于使用Vue组件化开发思想，将表格封装成一个可复用的组件...
CPP-function.rar_CPPFunction_doc_vtable
09-23
本文将深入探讨C++中的虚函数表（Virtual Table，简称VTable）及其相关概念。 首先，虚函数是基类声明的一个成员函数，其目的是为了在运行时确定应该调用哪个类的实现。当基类指针或引用指向派生类对象时，如果调用...
漏洞分析Vtable Lab(自用,记录)
weixin_48392428的博客
07-18 1097
Vtable Lab关闭ASLR查看vtable.cpp代码把源代码编译成root所有suid程序用objdump -s 解析ELF格式的可执行文件中的分段信息利用gdb反汇编查看虚函数表地址执行攻击，获得root shell 关闭ASLR 查看vtable.cpp代码 把源代码编译成root所有suid程序 用objdump -s 解析ELF格式的可执行文件中的分段信息 C++中虚函数表位于只读数据段（.rodata），也就是C++内存模型中的常量区；而虚函数则位于代码段（.text），也就是C++
开源高性能多维数据表格VTable
最新发布
mopmgerg54mo的博客
08-27 914
VTable多维表格是VisActor可视化体系中的一款高性能表格组件库，它基于可视化渲染引擎VRender进行封装，专为处理复杂的多维数据分析而设计。VTable支持百万级数据的快速运算与渲染，能够帮助用户更好地展示和分析数据，并从中发现有价值的信息。
虚函数表（vtable）
青衫客36的博客
08-06 1943
虚函数表是一个存放指向虚函数的指针数组。每一个有虚函数的类（或者从有虚函数的类继承而来的类）都有一个相关联的虚函数表。
VTable 开源项目教程
gitblog_01127的博客
08-10 246
VTable 开源项目教程 VTableVTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.项目地址:https://gitcode.com/gh_mirrors/vt...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值