CN114925665A - 一种基于web表格的图表数据编辑方法及系统 - Google Patents
一种基于web表格的图表数据编辑方法及系统 Download PDFInfo
- Publication number
- CN114925665A CN114925665A CN202210639318.9A CN202210639318A CN114925665A CN 114925665 A CN114925665 A CN 114925665A CN 202210639318 A CN202210639318 A CN 202210639318A CN 114925665 A CN114925665 A CN 114925665A
- Authority
- CN
- China
- Prior art keywords
- field
- data
- web
- value
- column
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 40
- 238000006243 chemical reaction Methods 0.000 claims abstract description 39
- 238000012545 processing Methods 0.000 claims abstract description 29
- 230000002776 aggregation Effects 0.000 claims description 12
- 238000004220 aggregation Methods 0.000 claims description 12
- 238000005259 measurement Methods 0.000 claims description 10
- 238000004364 calculation method Methods 0.000 claims description 9
- 238000009877 rendering Methods 0.000 claims description 9
- 238000013507 mapping Methods 0.000 claims description 7
- 238000012163 sequencing technique Methods 0.000 claims description 6
- 230000009466 transformation Effects 0.000 claims description 4
- 238000012800 visualization Methods 0.000 claims description 4
- 230000001960 triggered effect Effects 0.000 claims description 3
- 230000008569 process Effects 0.000 abstract description 11
- 230000000007 visual effect Effects 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 3
- 241000758789 Juglans Species 0.000 description 2
- 235000009496 Juglans regia Nutrition 0.000 description 2
- 241001047198 Scomberomorus semifasciatus Species 0.000 description 2
- 244000299461 Theobroma cacao Species 0.000 description 2
- 235000009470 Theobroma cacao Nutrition 0.000 description 2
- 230000004075 alteration Effects 0.000 description 2
- 235000012467 brownies Nutrition 0.000 description 2
- 235000013351 cheese Nutrition 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 239000008267 milk Substances 0.000 description 2
- 235000013336 milk Nutrition 0.000 description 2
- 210000004080 milk Anatomy 0.000 description 2
- 235000020234 walnut Nutrition 0.000 description 2
- 238000013079 data visualisation Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Health & Medical Sciences (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Artificial Intelligence (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种基于web表格的图表数据编辑方法及系统，所述方法包括以下步骤：步骤S110:初始化web表格，前端通过接口形式从服务端获取数据表的表字段；步骤S120:将需要展示的表字段通过拖拽的形式拖入到web表格某一列中，自动去服务端拉取该表字段的数据；步骤S130:编辑表字段，编辑方式是点击表字段，展示该字段可操作的信息，对字段数据进行处理；步骤S140:自动执行格式转换，生成数据集。采用本发明的系统和方法，不懂代码编程的业务人员也可以通过web表格的可视化形式对图表数据进行编辑和处理，并生成相应数据集供图表展示，无需编写代码处理数据。
Description
技术领域
本发明涉及计算机及网络通信技术领域，特别涉及一种基于web表格的图表数据编辑方法及系统。
背景技术
数据可视化技术中，对数据的处理是一个非要重要的过程，数据的处理质量直接影响到图表展示的效果。现实中，采集的原始数据通常不具备直接展示的能力，往往需要对原始数据进行加工，过滤出有业务价值的数据，并根据图表的映射关系编写相应格式的数据集（dataset）。因此，数据的处理一直是一个比较繁琐的过程，需要开发人员具备一定的编程能力。现有的解决方案基本都是：开发人员通过编写代码或者SQL，对原始数据进行过滤、类型转换、聚合、排序等操作后生成业务数据，然后通过代码对数据进行格式转换，生成相应的数据集。这种处理方式的不足在于： 一方面数据的采集者和使用者一般都是业务人员，然而业务人员因为不了解编程，很难直接编写代码处理数据，而开发人员常常对业务不够熟悉，因此除了增加沟通和人力成本，还有可能会导致业务和开发双方对需求理解有误，造成数据处理偏差。另一方面，也要求开发人员对不同图表类型、不同图表库的数据格式都比较熟悉，才能根据相应图表编写数据集。
发明内容
针对现有技术存在的问题，本发明的目的在于提供一种基于web表格的图表数据编辑方法，能够解决不懂代码编程的业务人员也可以对图表数据进行编辑和处理，并生成相应数据集（dataset）供图表展示。
为实现上述目的，本发明提供一种基于web表格的图表数据编辑方法，包括以下步骤：
步骤S110: 初始化web表格，前端通过接口形式从服务端获取数据表的表字段；
步骤S120: 将需要展示的表字段通过拖拽的形式拖入到web表格某一列中，自动去服务端拉取该表字段的数据；
步骤S130: 编辑表字段，编辑方式是点击表字段，展示该字段可操作的信息，对字段数据进行处理；
步骤S140:自动执行格式转换，生成数据集。
进一步，在步骤S110中，web表格进行初始化，生成一个web版本的只读编辑器，同时，从接口获取表数据，每个数据表字段中返回一个columnType的为0到3之间的整数，同时，前端会维护一个映射对象来枚举所有columnType的值与类型的映射，映射关系如下：
0：“数值”,
1：“文本”,
2：“日期”,
3：“其他”
若一个字段既不属于数值、文本、也不属于日期类型，则与服务端约定返回columnType值为3，标记为其他类型，例如二进制流、逻辑值等属于其他类型。同样的，我们将数值类型定义为度量值，将其余类型定义为维度值，并通过返回布尔值isDimension标记此字段是维度值还是度量值，示例代码如下：
constisDimension = columnTypeList[columnType] === ‘数值’
如果isDimension返回true,表明该字段为度量值，返回false,则表明该字段为维度值。并且为每个字段绑定一个拖拽事件dragStart，为web表格的每列绑定一个自定义before-drop事件，用来处理拖拽前的容错处理；为web表格的每列绑定一个接收拖入的事件drop，当有字段被成功拖入到该列中，该列就会触发drop事件，接受字段并向服务端发送数据请求；由此所述web表格就可以响应拖入到列中的表字段。
进一步，在步骤S120中，将表字段拖入web表格某一列后，首先触发before-drop事件，进入如下子步骤：
步骤220，判断当前字段拖入的列是否是web表格第一列，若判断结果为“是”，进入步骤230，若判断结果为“否”，直接进入步骤240；
步骤230，根据布尔值isDimension判断该字段是维度值还是度量值，若判断结果是度量值，提示“该列不允许拖入度量值”，拖拽失败，释放事件；若判断结果是维度值，进入步骤240；
步骤240，判断是否重复拖拽相同字段，若判断结果为“是”，提示“表格已存在相同字段”，拖拽失败，释放事件；若判断结果为“否”，则拖拽成功，调用服务端接口，通过字段名查询该字段下的所有数据，依次渲染表字段数据至结束；数据渲染完成以后，就可以对单字段进行数据处理操作。
进一步，在步骤S130中，单击某个字段名后，包括以下子步骤：
步骤310，web表格在该字段下方渲染一个下拉组件弹窗；
步骤320，根据字段的columnType值，显示相应的内容；
步骤330，用户可以点击相应的功能，对该字段进行编辑，用户每进行一步操作，都会向服务端发送请求，服务端根据用户的处理结果相应的对所在数据表进行筛选和操作。
进一步，在步骤320中，当字段columnType值为0，表明该字段是一个数值类型，渲染的内容会显示类型转换、数据格式转换、聚合、排序和计算条件的选项；当字段columnType值为1，表明该字段是一个文本类型，不具备数据格式转换、聚合和排序的选项；当字段columnType值为2，表明该字段是一个日期类型，不具备数据格式转换和聚合的选项；当字段columnType值为3，表明该字段是一个其他类型，其他类型比较特殊，无法编辑表字段和数据处理，只做展示使用。。
进一步，在步骤S130编辑表字段处理完成后，获取到想要的业务数据以后，点击确定按钮，就可以自动执行格式转换，生成数据集。
进一步，在步骤S140中，Echarts提供了两种格式的数据集,一种是以二维数组的形式映射；另一种是以“对象数组”的格式。
进一步，在以二维数组的格式中，使用可视化方式时，web表格自动执行格式转换，生成特定格式的数据集。
自动执行格式转换的步骤如下：
步骤410，遍历表格内的行列单元格，获取web表格生成的源数据；具体的，首先，生成一个对象结构，用来存储web表格的所有信息；然后，生成二级对象，用来存储单元格中行的cells对象以及存储样式的style对象信息；然后，在cells对象中，以行为维度，生成三级对象，用来存储所有的单元格内容；最后，在每一行对象中，生成四级对象，用来存储每一行的内容；
步骤420，优化层级，扁平化数据结构；具体的，在Echarts的数据集格式中，对数据结构进行一次扁平化操作，去掉cells层级；首先，遍历web源数据，并在每次遍历时根据web源数据二级对象的每个键值生成一个二维空数组，用来存放web表格中对应的行内容；然后将每一级的cells对象赋值给相应的二维数组，其代码如下：
Keys(sheetRows).forEach(rowkey => {
dataArray[rowkey] = [];
const rowCells = sheetRows[rowKey].cells;
dataArray[rowKey] = rowCells；
}
扁平化cells层级结构改造完成。
步骤430，提取内容字段，去除对象格式，完成格式转化；具体的，遍历步骤420中生成的每个数组对象，根据遍历的键值获取每个对象的text内容字段，并赋值给临时变量；然后根据键值获取二维数组对应的下标索引，并将值修改为临时变量，完成格式转化，代码如下：
keys(rowCells).forEach(cellKey) => {
const cellText = rowCells[cellKey].text;
dataArray[rowKey][cellKey] = cellText;
}
由于之前遍历时获取的键值跟web数据源的行列存在一一对应的关系，因此，最后获得的二维数组中索引也与行列存在对应关系； web表格的第一行对应二维数组的第一列数组，第二行对应二维数组的第二列数组，以此类推；通过web表格的形式能够处理图表数据，并自动生成对应数据集。
另一方面，本发明提供一种基于web表格的图表数据编辑系统，所述系统中应用根据本发明所述的基于web表格的图表数据编辑方法。
通过本发明提供的基于web表格的图表数据编辑方法及系统，非专业人员都可以通过web表格的可视化形式展现出来，能够轻松对图表数据进行编辑和处理，并生成相应数据集（dataset）供图表展示，无需编写代码处理数据。具有易操作、处理数据高效便捷的技术优势。
附图说明
图1示出了根据本发明实施例中web表格生成数据集(dataset)的流程图；
图2示出了在图1中拖拽至web表格的过程图；
图3示出了在图1中编辑表字段的过程图；
图4示出了在图1中自动执行格式转换。
具体实施方式
下面将结合附图，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。
在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。
以下结合附图1-4对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。
本发明的基于web表格的图表数据编辑方法及系统，将采集的数据通过web表格的可视化形式展现出来，并且能够通过编辑表头字段，对数据进行处理，最后通过自动格式转换，将数据格式转换成图表的数据集（dataset）。数据集（dataset），又称为资料集、数据集合或资料集合，是一种由数据所组成的集合，通常以表格形式出现。每一列代表一个特定变量。每一行都对应于某一成员的数据集的问题。它列出的价值观为每一个变量，如身高和体重的一个物体或价值的随机数。每个数值被称为数据资料。对应于行数，该数据集的数据可能包括一个或多个成员。
如图1，本发明的基于web表格的图表数据编辑方法，其基本流程为：
步骤S110: 初始化web表格，前端通过接口形式从服务端获取数据表的表字段；
步骤S120: 将需要展示的表字段通过拖拽的形式拖入到web表格某一列中，自动去服务端拉取该表字段的数据；
步骤S130: 编辑表字段，编辑方式是点击表字段，展示该字段可操作的信息，对字段数据进行处理；
步骤S140: 点击确定，自动执行格式转换，生成数据集（dataset）。
具体的，在步骤S110中，web表格会进行初始化，生成一个类似excel的web版本的只读编辑器，同时，从接口获取表数据，每个数据表字段中会返回一个columnType的值，并根据计算关系得出isDimension用来标记此字段是维度值还是度量值。并且为每个字段绑定一个拖拽事件dragStart，用于在拖动时触发，其代码如下：
<p @dragstart=’e =>hanldeDragStart(e, data)’>{{ name }}</p>
handleDragStart(e, filed) {
e.dataTransfer.setData(‘data’, filed)
}
为web表格的每列绑定一个自定义before-drop事件，用来处理拖拽前的容错处理：其代码如下：
trigger(‘before-drop’, evt => { handleBeforeDrop(evt)});
为web表格的每列绑定一个接收拖入的事件drop，当有字段被成功拖入到该列中，该列就会触发drop事件，接受字段信息并向服务端发送数据请求，其代码如下：
On(‘drop’, ent => { const data = JSON.parse(evt.dataTransfer.getData(‘data’))
response = requestURL(data)
})
这样web表格就可以响应拖入到列中的表字段。
具体的，在步骤S120中，将表字段拖入web表格某一列后，首先触发before-drop事件，如图2所示，系统会做如下判断：
步骤220，判断当前字段拖入的列是否是web表格的第一列，若判断结果为“是”，进入步骤230，若判断结果为“否”，直接进入步骤240；
步骤230，根据isDimension判断该字段是维度值还是度量值，若判断结果是度量值，提示“该列不允许拖入度量值”，拖拽失败，释放事件；若判断结果是维度值，进入步骤240；
步骤240，判断是否重复拖拽相同字段，若判断结果为“是”，提示“表格已存在相同字段”，拖拽失败，释放事件；若判断结果为“否”，则拖拽成功，渲染表字段数据。
示例代码如下：
trigger(‘before-droped’, dataParse, ri, ci, (res) => {
if(!res) {
if(ri === 1 &&isDimension ) {
Error(‘该列不允许拖入度量值’);
Return;
}
if(dataParse.name === riname) {
Error(‘表格已存在相同字段’);
Return;
}
} else {
setCellText(1, ri, dataParse.name);
}
})
拖入成功后，调用服务端接口，通过字段名查询该字段下的所有数据，数据返回成功以后，将该字段渲染显示到该列的第一行，从第二行开始依次渲染查询返回的数据。数据渲染成功以后，就可以对单字段进行数据处理操作。
上述维度值和度量值，其中维度是指可指定不同值的对象的描述性属性或特征。例如，地理位置的维度可以包括“纬度”、“经度”或“城市名称”；当描述某件商品的何时售出，是时间维度；描述这件商品的何地售出，是地理维度；描述这件商品的被谁买了，是人员维度。而度量就是基于某个属性对其属性的指标进行衡量。度量是业务流程节点上的一个数值，比如销售、价格、成本等。度量值参与聚合计算，例如算平均身高就是把表格中所有人的身高做汇总除以个数算出平均值。
具体的，在步骤S130中，单击某个字段名后，如图3所示，包括以下子步骤：
步骤310，web表格在该字段下方渲染一个下拉组件弹窗。
步骤320，根据字段的columnType值，显示不同的内容。例如：当字段columnType为0，表明该字段是一个数值类型，渲染的内容会显示类型转换、数据格式转换、聚合、排序、计算条件的选项；当字段columnType为1，表明该字段是一个文本类型，不具备数据格式转换、聚合、排序的选项；当字段columnType值为2，表明该字段是一个日期类型，不具备数据格式转换和聚合的选项；当字段columnType值为3，表明该字段是一个其他类型，其他类型比较特殊，无法编辑表字段和数据处理，只做展示使用。
步骤330，用户可以点击相应的功能，对该字段进行编辑，用户每进行一步操作，都会向服务端发送请求，服务端根据用户的处理结果相应的对所在数据表进行筛选和操作。
处理完成，拿到想要的业务数据以后，点击确定按钮，就可以自动执行格式转换，生成数据集（dataset）。
具体的，在步骤S140中，以Echarts图表为例，Echarts提供了两种格式的数据集（dataset）,一种是以二维数组的形式映射，示例代码如下：
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
另一种是以“对象数组”的格式：
source: [
{ product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{ product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
{ product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{ product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
以二维数组为例，当用户处理完成数据后，web表格生成的数据格式跟Echarts的数据集（dataset）结构相差非常大，开发人员需要编写特定函数，将数据结构进行转换；而当使用可视化方式时，web表格会自动执行格式转换，
生成符合Echarts二维数组格式的数据集（dataset）。
如图4所示，转换步骤如下：
步骤410，遍历表格内的行列单元格，获取web表格生成的源数据。
具体的，首先，会生成一个对象结构，用来存储web表格的所有信息；然后，生成二级对象，用来存储单元格中行的cells对象以及存储样式的style对象等信息；然后，在cells对象中，以行为维度，生成三级对象，用来存储所有的单元格内容；最后，在每一行对象中，生成四级对象，用来存储每一行的内容。
其格式如下：
{
0: {
cells: {
0: {
text: ‘姓名’
}
1: {
text: ‘身高’
}
}
}，
1: {
cells: {
0: {
text: ‘张三’
}
1: {
text: 170
}
}
}
}
步骤420，优化层级，扁平化数据结构。
具体的，在Echarts的数据集格式中，不需要记录行列信息，也不需要记录单元格内容以外的其他信息，因此可以对数据结构进行一次扁平化操作，去掉cells层级。首先，遍历web源数据，并在每次遍历时根据web源数据二级对象的每个键值生成一个二维空数组，用来存放web表格中对应的行内容。然后将每一级的cells对象赋值给相应的二维数组，其示例代码如下：
Keys(sheetRows).forEach(rowkey => {
dataArray[rowkey] = [];
const rowCells = sheetRows[rowKey].cells;
dataArray[rowKey] = rowCells；
}
此时的数据结构格式如下：
[{
0: {
text: ‘姓名’
}
1: {
text: ‘身高’
}
},
{
0: {
text: ‘张三’
}
1: {
text: 190
}
}]
扁平化cells层级结构改造完成。
步骤430，提取内容字段，去除对象格式，完成格式转化。
具体的，遍历步骤420中生成的每个数组对象，根据遍历的键值获取每个对象的text内容字段，并赋值给临时变量；然后根据键值获取二维数组对应的下标索引，并将值修改为临时变量，完成格式转化，示例代码如下：
keys(rowCells).forEach(cellKey) => {
const cellText = rowCells[cellKey].text;
dataArray[rowKey][cellKey] = cellText;
}
最后得到的数据集格式为：
[
[‘姓名’, ‘张三’],
[‘身高’, 170]
]
由于之前遍历时获取的键值跟web数据源的行列存在一一对应的关系，因此，最后获得的二维数组中索引也与行列存在对应关系。即web表格的第一行对应二维数组的第一列数组，第二行对应二维数组的第二列数组，以此类推。
通过web表格的形式能够处理图表数据，并自动生成对应数据集（dataset）。
在根据本发明的一个具体实施例中，服务端有一份存有某个班级50名学生的姓名、学号、年龄、性别、身高、体重、入学时间信息的数据表。现需要用柱状图展示全班身高前十名的学生。由于数据表的身高字段可能是“170cm”这样的文本值，因此需要对数据字段支持格式转换，将“170cm”的文本类型转换成170数值类型，然后身高降序排序，最后通过计算条件取前十名。因为要对表字段单独进行操作，所以服务端把表字段和数据分别放在columns和datas中返回:
首先获取到所有表字段columns数据，示例结构如下：
columns: [{
name:“姓名”,
columnType: 1,
}, {
studentId:“学号”,
columnType: 0,
}, {
age:“年龄”,
columnType: 0,
}, {
sex:“性别”,
columnType: 1,
}, {
height:“身高”,
columnType: 1,
}, {
weight:“体重”,
columnType: 1,
}, {
date:“入学时间”,
columnType: 3,
}]
第一步，拖动姓名字段到web表格的第一列，S220, S230, S240步骤判断通过，拖拽成功，前端将{ name: “姓名”}数据发送至服务端，服务端返回datas中所有学生姓名，第一列第一行渲染姓名字段，从第一列第二行开始渲染学生姓名数据。
第二步，拖动身高字段到web表格的第二列，S220, S230, S240步骤判断通过，拖拽成功，前端将{ name:“姓名”, height: “身高” }数据发送至服务端，服务端返回datas中所有学生的身高，第二列第一行渲染身高字段，从第二列第二行开始渲染对应学生的身高数据。
第三步，点击身高字段，在弹出的编辑弹窗中选择类型转换，此时身高字段的类型由文本变成数值，对应的“170cm”也自动转换成170；身高字段的编辑操作也增加了数值类型转换、聚合、排序。
第四步，点击排序 =>降序，web表格数据会根据身高数值降序排列。
第五步：点击计算条件 =>设置计算条件取前10条数据，web表格会展示前10条数据。
点击确定，web表格自动执行格式转换，转换示例代码：
Keys(sheetRows).forEach(rowkey => {
dataArray[rowkey] = [];
const rowCells = sheetRows[rowKey].cells;
keys(rowCells).forEach(cellKey) => {
const cellText = rowCells[cellKey].text;
dataArray[rowKey][cellKey] = cellText;
}
})
经过转换的数据结构输入如下：
source: [
[‘姓名’,‘张三’,‘李四’, ‘王五’ ],
[‘身高’, 177, 175, 173],
]转换后形成符合Echarts二维数组格式的数据集（dataset）。本发明的基于web表格的图表数据编辑方法通过可视化web表格的方式，让没有编程能力的业务人员也可以编辑和处理数据，并生成数据集（dataset）。
此外，本发明还提供一种基于web表格的图表数据编辑系统。所述系统用于使用本发明所述的基于web表格的图表数据编辑方法方法。
在本说明书的描述中，参考术语“实施例”、“示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外，本领域的技术人员可以在不产生矛盾的情况下，将本说明书中描述的不同实施例或示例以及其中的特征进行结合或组合。
上述内容虽然已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型等更新操作。
Claims (10)
1.一种基于web表格的图表数据编辑方法，其特征在于，包括以下步骤：
步骤S110: 初始化web表格，前端通过接口形式从服务端获取数据表的表字段；
步骤S120: 将需要展示的表字段通过拖拽的形式拖入到web表格某一列中，自动去服务端拉取该表字段的数据；
步骤S130: 编辑表字段，编辑方式是点击表字段，展示该字段可操作的信息，对字段数据进行处理；
步骤S140:自动执行格式转换，生成数据集。
2.根据权利要求1所述的基于web表格的图表数据编辑方法，其特征在于，在步骤S110中，web表格进行初始化，生成一个web版本的只读编辑器，同时，从接口获取表数据，每个数据表字段中返回一个columnType值为0到3之间的整数，同时，前端会维护一个映射对象来枚举所有columnType的值与类型的映射，映射关系如下：
0：“数值”,
1：“文本”,
2：“日期”,
3：“其他”；
当一个字段既不属于数值、文本、也不属于日期类型时，则与服务端约定返回columnType值为3，标记为其他类型，将数值类型定义为度量值，将其余类型定义为维度值，并通过返回布尔值isDimension标记此字段是维度值还是度量值，示例代码如下：
constisDimension = columnTypeList[columnType] === ‘数值’
如果isDimension返回true,表明该字段为度量值，返回false,则表明该字段为维度值；并且为每个字段绑定一个拖拽事件dragStart，为web表格的每列绑定一个自定义before-drop事件，用来处理拖拽前的容错处理；为web表格的每列绑定一个接收拖入的事件drop来接受数据；由此所述web表格就可以响应拖入到列中的表字段，当有字段被成功拖入到该列中，该列就会触发drop事件，接受字段信息并向服务端发送数据请求。
3.根据权利要求1或2所述的基于web表格的图表数据编辑方法，其特征在于，在步骤S120中，将表字段拖入web表格某一列后，首先触发before-drop事件，进入如下子步骤：
步骤220，判断当前字段拖入的列是否是web表格第一列，若判断结果为“是”，进入步骤230，若判断结果为“否”，直接进入步骤240；
步骤230，根据布尔值isDimension判断该字段是维度值还是度量值，若判断结果是度量值，提示“该列不允许拖入度量值”，拖拽失败，释放事件；若判断结果是维度值，进入步骤240；
步骤240，判断是否重复拖拽相同字段，若判断结果为“是”，提示“表格已存在相同字段”，拖拽失败，释放事件；若判断结果为“否”，则拖拽成功，调用服务端接口，通过字段名查询该字段下的所有数据，依次渲染表字段数据至结束；数据渲染完成以后，就可以对单字段进行数据处理操作。
4.根据权利要求3所述的基于web表格的图表数据编辑方法，其特征在于，在步骤S130中，单击某个字段名后，包括以下子步骤：
步骤310，web表格在该字段下方渲染一个下拉组件弹窗；
步骤320，根据字段的columnType值，显示相应的内容；
步骤330，用户可以点击相应的功能，对该字段进行编辑，用户每进行一步操作，都会向服务端发送请求，服务端根据用户的处理结果相应的对所在数据表进行筛选和操作。
5.根据权利要求4所述的基于web表格的图表数据编辑方法，其特征在于，在步骤320中，当字段columnType值为0，表明该字段是一个数值类型，渲染的内容会显示类型转换、数据格式转换、聚合、排序和计算条件的选项；当字段columnType值为1，表明该字段是一个文本类型，不具备数据格式转换、聚合和排序的选项；当字段columnType值为2，表明该字段是一个日期类型，不具备数据格式转换和聚合的选项；当字段columnType值为3，表明该字段是一个其他类型，其他类型比较特殊，无法编辑表字段和数据处理，只做展示使用。
6.根据权利要求5所述的基于web表格的图表数据编辑方法，其特征在于，在步骤S130编辑表字段处理完成后，获取到想要的业务数据以后，点击确定按钮，就可以自动执行格式转换，生成数据集。
7.根据权利要求6所述的基于web表格的图表数据编辑方法，其特征在于，在步骤S140中，Echarts提供了两种格式的数据集,一种是以二维数组的形式映射；另一种是以“对象数组”的格式。
8.根据权利要求7所述的基于web表格的图表数据编辑方法，其特征在于，在以“二维数组”的格式中，使用可视化方式时，web表格自动执行格式转换，生成特定格式的数据集。
9.根据权利要求8所述的基于web表格的图表数据编辑方法，其特征在于，自动执行格式转换的步骤如下：
步骤410，遍历表格内的行列单元格，获取web表格生成的源数据；具体的，首先，生成一个对象结构，用来存储web表格的所有信息；然后，生成二级对象，用来存储单元格中行的cells对象以及存储样式的style对象信息；然后，在cells对象中，以行为维度，生成三级对象，用来存储所有的单元格内容；最后，在每一行对象中，生成四级对象，用来存储每一行的内容；
步骤420，优化层级，扁平化数据结构；具体的，在Echarts的数据集格式中，对数据结构进行一次扁平化操作，去掉cells层级；首先，遍历web源数据，并在每次遍历时根据web源数据二级对象的每个键值生成一个二维空数组，用来存放web表格中对应的行内容；然后将每一级的cells对象赋值给相应的二维数组，其代码如下：
Keys(sheetRows).forEach(rowkey => {
dataArray[rowkey] = [];
const rowCells = sheetRows[rowKey].cells;
dataArray[rowKey] = rowCells；
}
扁平化cells层级结构改造完成；
步骤430，提取内容字段，去除对象格式，完成格式转化；具体的，遍历步骤420中生成的每个数组对象，根据遍历的键值获取每个对象的text内容字段，并赋值给临时变量；然后根据键值获取二维数组对应的下标索引，并将值修改为临时变量，完成格式转化，代码如下：
keys(rowCells).forEach(cellKey) => {
const cellText = rowCells[cellKey].text;
dataArray[rowKey][cellKey] = cellText;
}
由于之前遍历时获取的键值跟web数据源的行列存在一一对应的关系，因此，最后获得的二维数组中索引也与行列存在对应关系； web表格的第一行对应二维数组的第一列数组，第二行对应二维数组的第二列数组，以此类推；通过web表格的形式能够处理图表数据，并自动生成对应数据集。
10.一种基于web表格的图表数据编辑系统，其特征在于，所述系统中应用根据权利要求1-9任一项所述的基于web表格的图表数据编辑方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210639318.9A CN114925665A (zh) | 2022-06-08 | 2022-06-08 | 一种基于web表格的图表数据编辑方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210639318.9A CN114925665A (zh) | 2022-06-08 | 2022-06-08 | 一种基于web表格的图表数据编辑方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114925665A true CN114925665A (zh) | 2022-08-19 |
Family
ID=82813240
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210639318.9A Pending CN114925665A (zh) | 2022-06-08 | 2022-06-08 | 一种基于web表格的图表数据编辑方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114925665A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116127936A (zh) * | 2023-04-04 | 2023-05-16 | 深圳市城市交通规划设计研究中心股份有限公司 | 一种编制工程单位矩阵图的方法、电子设备及存储介质 |
| CN116383545A (zh) * | 2023-06-05 | 2023-07-04 | 北京拓普丰联信息科技股份有限公司 | 一种网页报表模板的生成方法、装置、设备和介质 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105740333A (zh) * | 2016-01-23 | 2016-07-06 | 北京掌阔移动传媒科技有限公司 | 一种可视化的广告管理平台和实现方法 |
| CN109829002A (zh) * | 2018-12-14 | 2019-05-31 | 成都四方伟业软件股份有限公司 | 一种基于web的复杂报表构建系统和构建方法 |
| CN110618983A (zh) * | 2019-08-15 | 2019-12-27 | 复旦大学 | 基于json文档结构的工业大数据多维分析与可视化方法 |
| CN111221458A (zh) * | 2020-01-08 | 2020-06-02 | 中联财联网科技有限公司 | 大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法 |
| CN112506493A (zh) * | 2020-10-30 | 2021-03-16 | 福建亿能达信息技术股份有限公司 | 一种基于vue的表格配置方法、装置、设备和介质 |
| CN113885859A (zh) * | 2021-10-20 | 2022-01-04 | 西安热工研究院有限公司 | 一种基于sis生产运行数据的低代码报表实现方法 |
| CN114091423A (zh) * | 2021-11-24 | 2022-02-25 | 杭州安恒信息技术股份有限公司 | 一种自定义报表的生成方法、装置、设备及存储介质 |
-
2022
- 2022-06-08 CN CN202210639318.9A patent/CN114925665A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105740333A (zh) * | 2016-01-23 | 2016-07-06 | 北京掌阔移动传媒科技有限公司 | 一种可视化的广告管理平台和实现方法 |
| CN109829002A (zh) * | 2018-12-14 | 2019-05-31 | 成都四方伟业软件股份有限公司 | 一种基于web的复杂报表构建系统和构建方法 |
| CN110618983A (zh) * | 2019-08-15 | 2019-12-27 | 复旦大学 | 基于json文档结构的工业大数据多维分析与可视化方法 |
| CN111221458A (zh) * | 2020-01-08 | 2020-06-02 | 中联财联网科技有限公司 | 大数据复制粘贴及拖拽克隆全局滑动表格的快速显示方法 |
| CN112506493A (zh) * | 2020-10-30 | 2021-03-16 | 福建亿能达信息技术股份有限公司 | 一种基于vue的表格配置方法、装置、设备和介质 |
| CN113885859A (zh) * | 2021-10-20 | 2022-01-04 | 西安热工研究院有限公司 | 一种基于sis生产运行数据的低代码报表实现方法 |
| CN114091423A (zh) * | 2021-11-24 | 2022-02-25 | 杭州安恒信息技术股份有限公司 | 一种自定义报表的生成方法、装置、设备及存储介质 |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116127936A (zh) * | 2023-04-04 | 2023-05-16 | 深圳市城市交通规划设计研究中心股份有限公司 | 一种编制工程单位矩阵图的方法、电子设备及存储介质 |
| CN116127936B (zh) * | 2023-04-04 | 2023-08-01 | 深圳市城市交通规划设计研究中心股份有限公司 | 一种编制工程单位矩阵图的方法、电子设备及存储介质 |
| CN116383545A (zh) * | 2023-06-05 | 2023-07-04 | 北京拓普丰联信息科技股份有限公司 | 一种网页报表模板的生成方法、装置、设备和介质 |
| CN116383545B (zh) * | 2023-06-05 | 2023-08-25 | 北京拓普丰联信息科技股份有限公司 | 一种网页报表模板的生成方法、装置、设备和介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114925665A (zh) | 一种基于web表格的图表数据编辑方法及系统 | |
| US9053082B2 (en) | Spreadsheet data processing method and system | |
| US20210150131A1 (en) | Methods and systems for annotating a dashboard | |
| US6906717B2 (en) | Multiple chart user interface | |
| US9047266B2 (en) | Methods, systems and computer program products for processing cells in a spreadsheet | |
| JP6518768B2 (ja) | レポートの構築 | |
| US8314798B2 (en) | Dynamic generation of contextual charts based on personalized visualization preferences | |
| MXPA04001732A (es) | Sistema automatizado y metodo para la valoracion de tecnologia y redaccion de una patente. | |
| KR101773574B1 (ko) | 데이터 테이블의 차트 시각화 방법 | |
| JP2010250864A (ja) | 情報処理装置およびプログラム | |
| CN104182226A (zh) | 一种通用移动信息系统适配方法与装置 | |
| JP2006244283A (ja) | データベース管理装置およびデータベース管理方法 | |
| CN115543288A (zh) | 代码信息的生成方法、装置、设备及存储介质 | |
| CN113050846B (zh) | 一种基于组件的时空大数据可视化配置方法及系统 | |
| CN107533581B (zh) | 引导结构化报告 | |
| US6345277B1 (en) | Method and apparatus for using an information model to organize an information repository into an extensible hierarchy of information | |
| US7739229B2 (en) | Exporting aggregated and un-aggregated data | |
| CN111796886B (zh) | 辅助系统及存储介质 | |
| US20150106278A1 (en) | Method and apparatus for search and analysis of real estate data | |
| JP6703925B2 (ja) | 見積装置、プログラム | |
| CN116383545B (zh) | 一种网页报表模板的生成方法、装置、设备和介质 | |
| CN110717083A (zh) | 一种多维数据的可视化方法、实现装置和存储介质 | |
| Carley | ORA-NetScenes quick start guide | |
| CN106681977B (zh) | 一种报表编辑方法及装置 | |
| Lindholm | Designing and assessing an interactive sunburst diagram for ICD |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20220819 |
|
| RJ01 | Rejection of invention patent application after publication |