CN116226487A

CN116226487A - 一种基于图形识别的数据大屏可视化方法及系统

Info

Publication number: CN116226487A
Application number: CN202310451912.XA
Authority: CN
Inventors: 王毅; 马囡囡; 骆晓广; 张金银
Original assignee: Hangzhou Bizhi Technology Co ltd
Current assignee: Hangzhou Bizhi Technology Co ltd
Priority date: 2023-04-25
Filing date: 2023-04-25
Publication date: 2023-06-06
Anticipated expiration: 2043-04-25
Also published as: CN116226487B

Abstract

本发明公开了一种基于图形识别的数据大屏可视化方法及系统，包括：步骤S110，智能识别设计稿；通过文件解析器将设计稿转化为可管理的树状结构数据，并对设计稿的图层信息进行处理以提取每个节点的特征数据；步骤S120，自动推荐并生成图表；根据图表规则可以获得每个节点特征所匹配的图表类型，按图表类型对节点特征进行分组，将所有特征的权重得分相加得到该图表类型的综合得分；对于所有图表类型，根据综合得分进行排序，最高的排在前面，取排名第一的图表类型作为推荐图表；步骤S130，检查图表是否符合预期；步骤S140，若否，则调整图表配置，直至图表样式符合预期；若是，则直接进入下一步骤；步骤S150，完成数据大屏的开发，通过显示屏进行展示。

Description

一种基于图形识别的数据大屏可视化方法及系统

技术领域

本发明涉及计算机及大数据处理技术领域，尤其是涉及一种基于图形识别的数据大屏可视化方法及系统。

背景技术

数据可视化是指将大型数据集中以图形图像的形式显示，相比于传统图表与数据仪表盘，如今的数据可视化致力于用更即时、生动、友好的形式。数据大屏可视化是以大屏为主要展示载体的数据可视化应用，具有大面积、炫酷动效、丰富色彩、独立主题等特点。无论在零售、物流、电力、水利、环保、还是交通领域，通过交互式实时数据大屏可视化来帮助业务人员发现并诊断业务问题，越来越成为大数据解决方案中不可或缺的一环。

数据大屏是以大屏为主要展示载体的数据可视化应用，相比于传统的可视化报表，具有显示面积大、承载信息多、图表内容丰富等特点。在现有的技术方案中，通常基于Echart、Charts.js等图表库，采用手动编码的方式进行数据大屏的开发。

现有技术中的数据大屏主要缺陷在于：一方面，由于Echart、Charts.js等图表库只提供了用于构建图表的图形语法和API方法，开发人员需要编写大量繁琐、重复的底层代码来进行图形绘制和图表配置，不仅开发难度高，而且开发效率低；另一方面，数据大屏在开发过程中经常需要根据实际业务指标调整图表样式，以达到最佳呈现效果，现有方案无法做到快速响应，从导致数据大屏的开发周期较长。

发明内容

针对现有技术存在的问题，本发明的目的在于提供一种基于图形识别的数据大屏可视化方法及系统，能够实现从设计稿一键生成数据大屏，解决数据大屏开发难度高、开发效率低的问题；同时能够通过可视化表单的方式快速进行图表配置，使得业务人员和设计师也能对图表进行低代码开发，快速响应业务需求，从而缩短数据大屏的开发周期。

为实现上述目的，本发明提供一种基于图形识别的数据大屏可视化方法，所述方法包括以下步骤：

步骤S110，智能识别设计稿；通过文件解析器将设计稿转化为可管理的树状结构数据，并对设计稿的图层信息进行处理以提取每个节点的特征数据；

步骤S120，自动推荐并生成图表；根据图表规则可以获得每个节点特征所匹配的图表类型，按图表类型对节点特征进行分组，将所有特征的权重得分相加得到该图表类型的综合得分；对于所有图表类型，根据综合得分进行排序，最高的排在前面，取排名第一的图表类型作为推荐图表；

步骤S130，检查图表是否符合预期；

步骤S140，若否，则手动调整图表配置，直至图表样式符合预期；若是，则直接进入下一步骤；

步骤S150，完成数据大屏的开发，通过显示屏进行展示。

进一步，在步骤S110中，设计稿包含多个图层，图层之间通过组合、嵌套进行关联和分层；根据设计稿的图层规则，通过文件解析器遍历并获取设计稿的所有图层信息。

进一步，每个图层都是一个节点，使用JSON对象表示；每个节点都包含图层类型、图层位置、图层大小、图层颜色、字体数据和分组信息。

进一步，在步骤S120中，使用图表适配器自动推荐并生成图表，输入参数为步骤S110所得的图层节点的特征数据，输出结果为推荐图表。

进一步，图表适配器为Advisor，通过将所有特征和规则的权重组合成一个特征和规则矩阵，使用策略树算法从特征数据的根节点开始，计算子节点的所有特征的权重得分，选择权重增益最大的特征作为节点特征；继续对每个子节点使用相同的方式进行计算，直到权重增益小于设定阈值或者没有特征可以选择为止；同时，根据图表规则可以获得每个节点特征所匹配的图表类型，按图表类型对节点特征进行分组，将所有特征的权重得分相加得到该图表类型的综合得分；对于所有图表类型，根据综合得分进行排序，取排名第一的图表类型作为推荐图表。

进一步，图表规则包含分类规则和推荐规则；分类规则用于对图层节点的特征数据进行分类，以推断特征所匹配的图表类型；图表规则的分类规则和推荐规则根据输出结果进行补充完善和权重调整，以不断提高图表推荐的准确性。

进一步，图表推荐的输出结果包含图表类型、图表得分、节点特征及特征得分的对象数组。

进一步，得到图表推荐结果之后，使用Generator提供的generate() 方法自动生成图表，根据图表类型初始化相应的图表实例，再将图表数据和节点特征作为图表参数传入图表实例，最后返回生成的图表实例。

进一步，步骤S110中通过文件解析器对设计稿的图层信息进行处理以提取每个节点的特征数据，然后基于图层节点的特征数据进行图表推荐；获得设计稿的图层信息之后，提取其节点特征的具体过程为：

步骤S210，提取图层信息中的样式特征；

步骤S220，提取图层信息中的属性特征；

步骤S230，将每个节点的样式特征和属性特征进行合并，生成图层节点的特征数据。

另一方面，本发明提供一种基于图形识别的数据大屏可视化系统，所述系统用于实现根据本发明的基于图形识别的数据大屏可视化方法，系统包括：

图形识别模块：对设计稿源文件进行读取和解析，并提取图层节点的特征数据；

图表推荐模块：基于图表规则和图层节点的特征数据自动推荐并生成图表；

图表配置模块：将图表属性映射为表单控件，通过表单配置更改图表类型及图表样式，对图表进行二次开发。

本发明通过图形识别功能智能从设计稿分析出包含的图层、布局、文本、图形元素等多维度的信息，根据每个节点的特征数据自动推荐并生成合适的图表，从设计稿一键生成数据大屏，解决数据大屏开发难度高、开发效率低的问题；同时能够通过可视化表单的方式快速进行图表配置，让业务人员和设计师也能对图表进行低代码开发，快速响应业务需求，从而缩短数据大屏的开发周期。

本发明基于图形识别智能推荐并生成图表，首先将设计稿源文件解析为图层节点，提取每个节点中图形元素的样式和属性作为特征数据，进行图表推荐和生成；此外，本发明将图表属性映射为表单控件，支持通过可视化表单的方式更改图表类型及图表样式，以低代码的方式提供图表的二次开发能力，其核心逻辑是通过图形识别提取特征数据，进行图表推荐，最后通过低代码的方式对图表进行修改，从而完成数据大屏的快速开发和需求变更。

附图说明

图1示出了根据本发明实施例基于图形识别的数据大屏可视化方法的流程图；

图2示出了在图1中智能识别设计稿步骤的节点特征提取流程；

图3示出了根据本发明的图层节点构成示意图；

图4示出了根据本发明实施例基于图形识别的数据大屏可视化系统的整体架构图。

具体实施方式

下面将结合附图，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

以下结合图1-图4对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。

通过图形识别功能智能从设计稿分析出包含的图层、布局、文本、图形元素等多维度的信息，根据每个节点的特征数据自动推荐并生成合适的图表，实现从设计稿一键生成数据大屏；再根据属性描述（JSON Schema）将图表属性映射为表单控件，实现图表属性和表单控件的联动。

如图1所示，根据本发明实施例的一种基于图形识别的数据大屏可视化方法，包括以下步骤：

步骤S130，检查图表是否符合预期，包括图表类型及图表样式是否与设计稿保持一致；

步骤S140，若否，则调整图表配置，直至图表样式符合预期；若是，则直接进入下一步骤；

步骤S150，完成数据大屏的开发，通过显示屏进行展示。

具体的，在步骤S110中，通过文件解析器将设计稿转化为可管理的树状结构数据，并对设计稿的图层信息进行处理以提取每个节点的特征数据。设计稿通常包含多个图层，图层之间通过组合、嵌套进行关联和分层。根据设计稿的图层规则，通过文件解析器可以遍历并获取设计稿的所有图层信息。

首先通过文件解析器中的Puppeteer对象创建一个Browser实例，使用newPage()方法新建一个浏览器页面，然后使用Browser实例的goto()方法加载指定位置的设计稿源文件；接着，创建一个PSD实例解析浏览器页面的上下文内容，根据元信息判断其是否包含设计稿图层信息；校验通过后使用tree()方法获取其根节点，再使用asTree()方法将其转换为树状结构数据，最后通过异步方法将其以JSON对象的形式返回，并释放Browser实例。其示例代码如下：

const puppeteer = require('puppeteer');

const PSD = require('psd');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto('file:///Users/username/path/to/screen.psd');

const json = await page.evaluate(() => {

const tree = new PSD().parse().tree();

return tree.asTree().toJSON();

});

await browser.close();

})();

其中，每个图层都是一个节点，使用JSON对象表示。如图3所示，每个节点都包含图层类型、图层位置、图层大小、图层颜色、字体数据和分组信息等。因此，使用文件解析器生成的设计稿图层信息是一个嵌套的JSON对象，其具体字段及含义如下：

type：图层类型，分组（group）和图层（layer）

opacity：图层颜色不透明度

name：图层名称

left：图层距离画布左侧距离

right：图层距离画布右侧距离

top：图层距离画布顶部距离

bottom：图层距离画布底部距离

height：图层高度

width：图层宽度

children：图层子节点

mask：图层蒙版

text：文本及字体数据

image：图像数据

其示例代码如下：

{

children:

[{

type: 'group',

visible: false,

opacity: 1,

blendingMode: 'normal',

left: 0,

right: 900,

top: 0,

bottom: 600,

height: 600,

width: 900,

children:

[{

type: 'layer',

visible: true,

opacity: 1,

blendingMode: 'normal',

left: 275,

right: 636,

top: 435,

bottom: 466,

height: 31,

width: 361,

mask: {},

text:

{

value: 'Make a change and save.',

font:

{

sizes: [33],

colors: [[85, 96, 110, 255]],

alignment: ['center']

},

left: 0,

top: 0,

right: 0,

bottom: 0,

transform: { xx: 1, xy: 0, yx: 0, yy: 1, tx: 456,ty: 459 }

},

image: {}

}]

}],

...

}

将设计稿转化为上述结构化的数据描述，便可以对其进行处理以提取每个节点的特征数据。图层节点的特征数据将作为图表适配器的输入参数，以实现对于不同节点的自适应图表推荐和生成。其示例代码如下：

{

componentName:‘Div’,

id:‘Node_644975’,

rect:{

x:0,

y:0,

width:342,

height:342

},

props:{

style:{

display:‘flex’,

position:‘relative’,

alignItems:‘flex-start’,

flexDirection:‘row’,

opacity:‘1.00’,

width:‘342px’,

height:‘342px’

},

className:‘bd’

}

具体的，在步骤S120中，使用图表适配器自动推荐并生成图表。图表适配器（ChartAdvisor）是一个同时包含图表推荐和图表生成的工具类。具体如下：

Advisor：是对应图表推荐的工具类；

Generator：是对应图表生成的工具类；

Advisor提供了advise() 方法用于图表推荐，输入参数为AdviseParams，即步骤S110所得的图层节点的特征数据，输出结果为推荐图表。Advisor的图表推荐基于系统定义的一系列图表规则，通过将所有特征和规则的权重组合成一个特征和规则矩阵，使用策略树算法从特征数据的根节点开始，计算子节点的所有特征的权重得分，选择权重增益最大的特征作为节点特征；继续对每个子节点使用相同的方式进行计算，直到权重增益很小或者没有特征可以选择为止。同时，根据图表规则可以获得每个节点特征所匹配的图表类型，按图表类型对节点特征进行分组，将所有特征的权重得分相加得到该图表类型的综合得分；对于所有图表类型，根据综合得分进行排序，最高的排在前面，取排名第一的图表类型作为推荐图表。其示例代码如下：

advise(params: AdviseParams): Advice[] {

const { data, options } = params;

let adviceResult: Advice[];

// 使用策略树算法计算所有特征的权重得分

const graphAdvices = this.advicesForGraph(params asGraphAdviseParams);

if (this.shouldRecommendGraph(data, options)) {

// 使用权重增益最大的特征作为节点特征

adviceResult = graphAdvices;

// advices = graphAdvices.concat(chartAdvices)

} else {

// 根据图表规则获得节点特征的图表类型，按图表类型进行分组

const chartAdvices = this.advicesForChart(params asChartAdviseParams);

// Otherwise, higher priority for statistical charts

adviceResult = (chartAdvices as Advice[]).concat(graphAdvices)as Advice[];

}

// 返回推荐图表的集合，根据综合得分进行排序

return adviceResult;

}

其中，图表规则包含分类规则和推荐规则。分类规则主要用于对图层节点的特征数据进行分类，以推断特征所匹配的图表类型，其定义遵循ECharts、chart.js的图表构成，包括坐标系、形状、视觉通道等。其规则定义如下：

坐标系（coordinate system）：图表通常都是建立在某一种坐标系上的，通过坐标系可以对图表进行分类；

NumberLine：数轴，如进度条等；

Cartesian2D：二维直角坐标系，折线图、柱状图等；

Cartesian3D：三维直角坐标系，如气泡图等；

Polar：极坐标系，如环形图、玫瑰图等；

Radar：雷达型坐标系，如雷达图等；

形状（shape）：图表是图形的有序表达，根据图形能有效对图表进行分类；

Lines：线形，如多折线、平行坐标等；

Bars：条形，如柱状图、条形图、甘特图等；

Round：圆形，如饼图、雷达图等；

Square：方形，如树图、热力图等；

Area：面积形，如面积图、连续热力图等；

Scatter：散点形，如散点图、气泡图、词云等；

视觉通道（visual channel）：通过对图表的视觉表现进行抽象，也可以对图表进行分类；

Position：位置；

Length：长度；

Color：颜色；

Area：面积；

Angle：角度；

ArcLength：弧长；

Direction：方向；

Size：尺寸；

而推荐规则用于根据节点分类对节点特征进行权重增益计算，从而获得图表推荐的决策结果。其规则定义如下：

data-check：适用于所有类型的图表；

数据包含必需的最小字段集，默认权重1.0；

bar-series-qty：适用于条形图、柱状图等；

柱图具有恰当数量的条形或条形组，默认权重0.5；

diff-pie-sector：适用于饼图、环形图、玫瑰图等；

扇形区域之间要有足够大的差，默认权重0.5；

landscape-or-portrait：适用于条形图、柱状图等；

纵向推荐条形图，横向推荐柱状图，默认权重0.3；

limit-series：适用于所有类型的图表；

避免一种序列的值过多，默认权重1.0；

line-field-time-ordinal：适用于折线图、面积图等；

包含时间或顺序性字段则推荐折线图，默认权重1.0；

图表规则的分类规则和推荐规则可以根据输出结果进行补充完善和权重调整，以不断提高图表推荐的准确性。图表推荐的输出结果使用adviceResult表示，是一个包含图表类型、图表得分、节点特征及特征得分的对象数组，其示例代码如下：

[{

"chartType":"pie_chart",

"spec":{

"basis":{

"type":"chart"

},

"data":{

"type":"json-array",

"values":[{

"price":100,

"type":"A"

},

{

"price":120,

"type":"B"

}]

},

"nodeFeatures":[{

"mark":{

"type":"arc"

},

"encoding":{

"theta":{

"field":"price",

"type":"quantitative"

},

"color":{

"field":"type",

"type":"nominal"

}

},

// 其他节点特征

]

},

"score":1.5535986680617797,

"rules":[{

"ruleId":"data-check",

"score":0,

"ruleType":"HARD"

},

{

"ruleId":"data-field-qty",

"score":1,

"ruleType":"HARD"

},

{

"ruleId":"diff-pie-sector",

"score":0.17592592592592599,

"ruleType":"SOFT"

},

{

"ruleId":"series-qty-limit",

"score":0,

"ruleType":"SOFT"

}]

得到图表推荐结果之后，就可以使用Generator提供的generate()方法自动生成图表。自动生成图表的流程如下：首先接受advise()方法的输出结果adviceResult作为参数，输出结果包括图表数据（data）、图表类型（chartType）和节点特征（nodeFeatures）字段，输出结果为推荐图表的实例。然后根据图表类型初始化相应的图表实例，将图表数据和节点特征作为图表参数传入图表实例。最后返回生成的图表实例。其示例代码如下：

function generate (data, chartType, nodeFeatures) {

let chartComponent;

// 根据图表类型初始化对应的图表实例

switch(chartType) {

case 'bar':

chartComponent = new BarChart();

break;

case 'line':

chartComponent = new LineChart();

break;

// 其他图表类型

default:

chartComponent = new BarChart();

}

chartComponent.setData(data);

// 根据节点特征设置图表参数

for (let feature of nodeFeatures) {

switch(feature) {

case 'dataType':

chartComponent.formatDataAsNumber();

break;

case 'dataDistribution':

chartComponent.normalizeData();

break;

// 其他节点特征

default:

}

// 返回生成的图表实例

return chartComponent;

}

其中，图表实例的初始化、数据声明和参数配置都通过直接调用Echarts或chart.js的开放API来实现，具体流程如下：首先在数据大屏的入口文件中为图表实例定义一个DOM容器；然后使用ECharts自带的init()方法初始化一个echarts实例，并将其挂在到准备好的DOM容器；最后使用推荐图表的示例作为echarts实例的图表配置，完成后即可在页面中显示推荐图表的渲染结果。其示例代码如下：

<body>

// 为图表实例定义DOM容器

// 基于准备好的dom初始化echarts实例

var autoChart = echarts.init(document.getElementById('main'));

// 使用生成的图表实例作为图表配置

autoChart.setOption(chartComponent);

</script>

</body>

当上述所有图表渲染完成之后，步骤S130检查图表推荐结果是否符合预期，包括图表类型以及图表样式是否与设计稿保持一致。

如果所有图表类型及图表样式都符合预期，则步骤S150完成数据大屏的开发。其中，影响图表推荐结果准确性的因素有很多，包括智能识别设计稿时可能存在的误差、图表推荐算法的成熟度以及自动生成图表时的节点特征数量，甚至是来自客户的临时需求变更等不可控因素。为了保证最终交付的数据大屏符合预期，且能够快速响应客户的需求变更，该系统提供了针对图表推荐结果的二次开发能力，将推荐图表的节点特征映射为表单控件，实现通过可视化的表单配置更改图表属性，从而调整推荐图表的图表类型及图表样式，能够通过可视化表单的方式快速进行图表配置。

具体的，在步骤S140中，根据属性描述（JSON Schema）将推荐图表的节点特征映射为表单控件，实现图表属性和表单控件的联动。图表属性的参数类型通常包括文本、数值、色值、布尔值、百分比值等，根据图表属性的参数类型及其取值范围，本发明可以通过以下几种表单控件来实现图表属性的可视化配置：

Text：文本输入框，支持定制前后缀；

Number：数值输入框，支持格式化和后缀；

Select：选择器，支持文本和数值选项；

Color：颜色选择器；

Multicolor：渐变颜色选择器，可选单色或渐变色；

Hidden：隐藏配置项，在表单中不会渲染该配置项；

Radio：单选框，适用于可枚举参数；

Checkbox：复选框，适用于可枚举参数；

Image：图片框选择器；

Switch：开关，适用于布尔值；

Slider：滑动条，支持最大值、最小值、前缀和后缀，适用于有限数值；

首先，定义一个renderForm()函数，所述函数接受步骤S120的输出结果adviceResult作为输入参数，通过对其节点特征nodeFeatures进行遍历，获取每个特征的参数类型及取值，根据上述规则可以推断出该特征所映射的表单控件，将控件类型写入对应的节点特征，生成推荐图表的属性描述。在柱状图bar中，其中包含bgColor和emptyData两个节点特征，使用for循环进行遍历获得emptyData属性的默认值，通过typeof运算符其数据类型，返回值为“boolean”则表示emptyData属性的参数值为Boolean类型；根据上述节点特征与表单控件的映射关系可知，参数值为Boolean类型的图表属性使用Switch控件进行映射和联动。最后，通过JSON语法在emptyData对象中添加一个值为“switch”的type字段，用于建立图表属性与表单控件的映射关系。其示例代码如下：

"bar": {

"emptyData": {

"name": "空值数据",

// 将Boolean类型的图表属性映射为Switch控件

"type": "switch",

"default": false

}

然后，通过遍历获取上述属性描述中的属性名称（name）、控件类型（type）和默认值（default）的集合，使用createElement() 方法创建表单项，再通过form元素提供的appendChild() 方法将表单项组合并输出完整的表单配置。其示例代码如下：

const form = document.createElement('form')

const inputs = fieldset.children.filter(child => child.tagName === 'input')

inputs.forEach(input => {

// 使用属性名称作为控件标签文本

const label = document.createElement('label')

label.textContent = input.getAttribute('name')

// 根据控件类型创建表单控件，使用属性默认值作为控件值

const inputElement = document.createElement('input')

inputElement.type = input.getAttribute('type')

inputElement.value = input.getAttribute(' default')

// 将控件元素添加至form表单

label.appendChild(inputElement)

form.appendChild(label)

})

return form

这样，能够通过可视化表单的方式表达和呈现图表属性，包括图表类型、属性名称及默认值。最后，利用现代化Web编程语言（如Vue、React等）中双向数据绑定的特性，它负责监听表单事件并根据用户的输入动态改变其绑定的值，同样可以根据绑定值的改变来操作页面DOM的更新，从而实现图表属性和表单控件的联动，让业务人员和设计师无需编写代码，也能够通过可视化表单的方式对图表进行配置，快速响应业务需求。

步骤S110中通过文件解析器对设计稿的图层信息进行处理以提取每个节点的特征数据，然后基于图层节点的特征数据进行图表推荐。参见图2，获得设计稿的图层信息之后，提取其节点特征的具体过程为：

首先，步骤S210，提取图层信息中的样式特征；

之后，步骤S220，提取图层信息中的属性特征；

最后，步骤S230，将每个节点的样式特征和属性特征进行合并，生成图层节点的特征数据。

每个图层节点的特征数据都包含样式和属性两部分。其中，样式是指绘图属性，包括图形元素的颜色、线宽、位置、阴影、透明度，以及字体大小、字体粗细等；属性是指图表属性，如图例、标签、坐标轴等相关配置。根据上述特征定义及分类规则，通过对图层信息进行遍历即可提取每个节点的特征数据。文件解析器提供了一系列的API方法，可以对设计稿的树状结构数据进行访问、查找、过滤等操作。具体方法包括：

root():在任意位置获取设计稿根节点；

isRoot()：判断当前节点是否为根节点；

children()：获取当前节点的直系子节点；

hasChildren()：判断当前节点是否有子节点；

ancestors()：获取当前节点的所有父节点；

siblings()：获取当前节点的所有同级节点；

nextSiblings()：获取当前节点之后的所有同级节点；

prevSiblings():获取当前节点之前的所有同级节点；

hasSiblings()：判断当前节点是否具有同级节点；

descendants()：判断当前节点是否具有后代节点；

subtree()：获取当前节点的所有后代节点；

depth()：计算当前节点的深度（根节点为0）；

path()：获取当前节点的路径；

具体地，使用root() 方法获取设计稿的根节点，根据节点对象中键值对的key值判断其是否属于样式特征或属性特征；继续对每个子节点使用相同的方式进行判断，直到所有节点的hasChildren() 方法返回false为止。首先，使用for循环遍历layers图层节点，使用switch语句对节点特征进行条件判断，如果与CSS样式的关键字匹配则添加至style数组，生成当前图层节点的样式特征。使用相同的方式可以提取图层节点的属性特征，其示例代码如下：

// 提取样式特征

const parseStyle = (layers) => {

for (let key in layers) {

switch (key) {

case 'fontSize': // 字体大小

case 'marginTop': // 顶部距离

case 'marginBottom': // 底部距离

case 'height': // 图层高度

case 'width': // 图层宽度

… // 其他样式特征

style [key] = layers[key];

break;

}

return style;

}

// 提取属性特征

const parseProps = (layers) => {

for (let key in layers) {

switch (key) {

case 'title': // 图表标题

case 'tooltip': // 提示信息

case 'legend': // 图例信息

case 'xAxis':

case 'yAxis':

case 'series':

… // 其他属性特征

property [key] = layers [key];

break;

}

return property;

}

最后，通过Object对象的内置方法将上述parseStyle() 和parseProps() 的返回结果合并为一个新的对象，即图层节点的特征数据。

此外，本发明还提供一种基于图形识别的数据大屏可视化系统，所述系统用于实现根据本发明的基于图形识别的数据大屏可视化方法。如图4所示，根据本发明的系统，其整体架构包括：

图形识别模块：对设计稿源文件（PSD、Sketch）进行读取和解析，并提取图层节点的特征数据；

图表配置模块：将图表属性映射为表单控件，通过表单配置更改图表类型及图表样式，以低代码的方式对图表进行二次开发；

本发明方案能够实现从设计稿一键生成数据大屏，解决数据大屏开发难度高、开发效率低的问题；同时能够通过可视化表单的方式快速进行图表配置，使得业务人员和设计师也能对图表进行低代码开发，快速响应业务需求，从而缩短数据大屏的开发周期。

本发明实现了设计稿解析及节点特征提取；根据节点特征自动推荐并生成图表；使用可视化表单的方式快速进行图表配置；通过图形识别功能智能从设计稿分析出包含的图层、布局、文本、图形元素等多维度的信息，根据每个节点的特征数据自动推荐并生成合适的图表。

本发明流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为表示包括一个或多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，可以实现在任何计算机刻度介质中，以供指令执行系统、装置或设备，所述计算机可读介质可以是任何包含存储、通信、传播或传输程序以供执行系统、装置或设备使用。包括只读存储器、磁盘或光盘等。

在本说明书的描述中，参考术语“实施例”、“示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外，本领域的技术人员可以在不产生矛盾的情况下，将本说明书中描述的不同实施例或示例以及其中的特征进行结合或组合。

上述内容虽然已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型等更新操作。

Claims

1.一种基于图形识别的数据大屏可视化方法，其特征在于，所述方法包括以下步骤：

步骤S130，检查图表是否符合预期；

步骤S150，完成数据大屏的开发，通过显示屏进行展示。

2.根据权利要求1所述的一种基于图形识别的数据大屏可视化方法，其特征在于，在步骤S110中，设计稿包含多个图层，图层之间通过组合、嵌套进行关联和分层；根据设计稿的图层规则，通过文件解析器遍历并获取设计稿的所有图层信息。

3.根据权利要求2所述的一种基于图形识别的数据大屏可视化方法，其特征在于，每个图层都是一个节点，使用JSON对象表示；每个节点都包含图层类型、图层位置、图层大小、图层颜色、字体数据和分组信息。

4.根据权利要求1所述的一种基于图形识别的数据大屏可视化方法，其特征在于，在步骤S120中，使用图表适配器自动推荐并生成图表，输入参数为步骤S110所得的图层节点的特征数据，输出结果为推荐图表。

5.根据权利要求4所述的一种基于图形识别的数据大屏可视化方法，其特征在于，图表适配器为Advisor，通过将所有特征和规则的权重组合成一个特征和规则矩阵，使用策略树算法从特征数据的根节点开始，计算子节点的所有特征的权重得分，选择权重增益最大的特征作为节点特征；继续对每个子节点使用相同的方式进行计算，直到权重增益小于设定阈值或者没有特征可以选择为止；同时，根据图表规则可以获得每个节点特征所匹配的图表类型，按图表类型对节点特征进行分组，将所有特征的权重得分相加得到该图表类型的综合得分；对于所有图表类型，根据综合得分进行排序，取排名第一的图表类型作为推荐图表。

6.根据权利要求5所述的一种基于图形识别的数据大屏可视化方法，其特征在于，图表规则包含分类规则和推荐规则；分类规则用于对图层节点的特征数据进行分类，以推断特征所匹配的图表类型；图表规则的分类规则和推荐规则根据输出结果进行补充完善和权重调整，以不断提高图表推荐的准确性。

7.根据权利要求6所述的一种基于图形识别的数据大屏可视化方法，其特征在于，图表推荐的输出结果包含图表类型、图表得分、节点特征及特征得分的对象数组。

8.根据权利要求7所述的一种基于图形识别的数据大屏可视化方法，其特征在于，得到图表推荐结果之后，使用Generator提供的generate() 方法自动生成图表，根据图表类型初始化相应的图表实例，再将图表数据和节点特征作为图表参数传入图表实例，最后返回生成的图表实例。

9.根据权利要求1所述的一种基于图形识别的数据大屏可视化方法，其特征在于，步骤S110中通过文件解析器对设计稿的图层信息进行处理以提取每个节点的特征数据，然后基于图层节点的特征数据进行图表推荐；获得设计稿的图层信息之后，提取其节点特征的具体过程为：

步骤S210，提取图层信息中的样式特征；

步骤S220，提取图层信息中的属性特征；

10.一种基于图形识别的数据大屏可视化系统，所述系统用于实现根据权利要求1-9任一项所述的基于图形识别的数据大屏可视化方法，其特征在于，系统包括：