一种基于SVG的构建蜘蛛网效果图的系统及方法与流程

一种基于svg的构建蜘蛛网效果图的系统及方法
技术领域
1.本发明属于计算机技术领域，具体是涉及一种基于svg的构建蜘蛛网效果图的系统及方法。


背景技术：

2.蜘蛛网图以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。它可以将多维数据进行展示，但是点的相对位置和坐标轴之间的夹角是没有任何信息量的。在坐标轴设置恰当的情况下雷达图所围面积能表现出一些信息量。利用蜘蛛网图，可以直观地展现多维数据集，查看哪些变量具有相似的值、变量之间是否有异常值。蜘蛛网图也可用于查看哪些变量在数据集内得分较高或较低，因此非常适合显示性能。蛛网图可以直观地展现多维数据集，查看哪些变量具有相似的值、变量之间是否有异常值，适合用于查看哪些变量在数据集内得分较高或较低，可以很好的展示性能和优势，特别适合展现某个数据集的多个关键特征，或者展现某个数据集的多个关键特征和标准值的比对，一般适用于比较多条数据在多个维度上的取值。
3.web数据可视化主要是借助于图形化手段，清晰有效地传达与沟通信息，它与信息图形、信息可视化、科学可视化以及统计图形密切相关。目前，现有技术如css动画机制、其他第三方库，只是解决具有蛛网效果图形效果并可以具有动画图形移动功能，并不能实现数据分析功能。在web数据可视化领域，不单单只是炫酷动效的需求,还经常存在动态展示数据、数据对比分析及对数据操作的需求，而一般的蛛网效果web组件并不能满足以上需求，因此需要迫切解决。
4.针对相关技术中存在现有技术中蜘蛛网效果图不能实现数据分析的功能，目前还没有提出有效的解决方案。


技术实现要素：

5.在本实施例中提供了一种基于svg的构建蜘蛛网效果图的系统及方法，以解决相关技术中蜘蛛网效果图不能实现数据分析的功能的问题。
6.第一个方面，在本实施例中提供了一种基于svg的构建蜘蛛网效果图的系统，所述系统包括web客户端和web服务器，所述web客户端，将客户输入的数据发送至所述web服务器；
7.所述web服务器，根据客户输入的数据，创建可缩放矢量图形svg容器，根据所述svg容器的大小，确定最大圆形半径；根据所述最大圆形半径，创建若干个底圆，构建所述蜘蛛网效果图的底图；根据客户输入的数据，确定分布在所述底图上的数据点的个数和位置；根据所述底圆的圆心、所述数据点的个数和位置及所述底圆，构建所述蜘蛛网效果图；其中，所述若干个底圆同心。
8.在其中的一些实施例中，所述系统还包括可视化数据对比分析展示模块和/或交互模块。
9.第二个方面，在本实施例中提供了一种基于svg的构建蜘蛛网效果图的方法，包括：
10.根据客户输入的数据，创建可缩放矢量图形svg容器；
11.根据所述svg容器大小确定最大圆形半径；根据所述最大圆形半径，创建若干个底圆，构成所述蜘蛛网效果图的底图；
12.根据客户输入的数据，确定分布在所述蜘蛛网底图上的数据点的个数和位置；
13.根据所述底圆的圆心、所述数据点的个数和位置及所述底圆，构建所述蜘蛛网效果图；其中，所述若干个底圆同心。
14.在其中的一些实施例中，所述方法还包括对所述蜘蛛网效果图的可视化数据进行对比分析展示。
15.在其中的一些实施例中，所述蜘蛛网效果图中还设置有链接，当点击所述链接时，对所述链接所携带的详细信息进行显示。
16.在其中的一些实施例中，所述根据所述最大圆形半径，创建若干个底圆，构成所述蜘蛛网效果图的底图包括：
17.通过svg，创建不同半径的所述底圆，构成所述蜘蛛网效果图的底图。
18.在其中的一些实施例中，所述根据所述底圆的圆心、所述数据点的个数和位置及所述底圆，构成蜘蛛网效果图包括：
19.根据分布在所述底圆上数据点的个数，计算出每个所述数据点的间隔弧度，根据所述底圆上的数据点的坐标算法,算出每个所述数据点在所述底圆上的位置，使用svg生成与所述数据点的个数相同数量的所述蜘蛛网效果图的实线。
20.在其中的一些实施例中，所述蜘蛛网效果图还用于对可视化数据进行对比分析展示包括：
21.对客户输入的所述数据进行映射，得到所述数据的圆形半径，根据所述数据的圆形半径，创建所述蜘蛛网效果图的底圆，结合所述数据点的坐标算法，计算出所述数据点在所述底圆上的坐标点，利用svg将圆心与所述坐标点连接起来，得到所述蜘蛛网效果图的实线。
22.第三个方面，在本实施例中提供了一种基于svg的构建蜘蛛网效果图的装置，所述装置包括：
23.创建模块，所述创建模块用于根据客户输入的数据，创建可缩放矢量图形svg容器；
24.确定模块，所述确定模块用于根据所述svg容器大小确定最大圆形半径；根据所述最大圆形半径，创建若干个底圆，构成所述蜘蛛网效果图的底图；
25.计算模块，所述计算模块用于根据客户输入的数据，确定分布在所述蜘蛛网底图上的数据点个数和位置；
26.构成模块，所述构成模块用于根据所述底圆的圆心、所述数据点的个数和位置及所述底圆，构成蜘蛛网效果图；其中，所述若干个底圆同心。
27.第四个方面，在本实施例中提供了一种电子装置，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第二个方面所述的基于svg的构建蜘蛛网效果图的方法。
28.与相关技术相比，在本实施例中提供的一种基于svg的构建蜘蛛网效果图的系统及方法，通过可缩放矢量图形svg技术，构建出二维平面蜘蛛网效果图，解决了现有中蜘蛛网效果图不能实现数据分析的功能，实现了将不同的数据集依据算法在图形上展示，达到数据可视化的效果。
29.本技术的一个或多个实施例的细节在以下附图和描述中提出，以使本技术的其他特征、目的和优点更加简明易懂。
附图说明
30.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
31.图1是本实施例的基于svg的构建蜘蛛网效果图的方法的终端的硬件结构框图。
32.图2是本实施例的一种基于svg的构建蜘蛛网效果图的系统结构图。
33.图3是本实施例的一种基于svg的构建蜘蛛网效果图的系统软件结构图。
34.图4是本实施例的基于svg的构建蜘蛛网效果图的方法流程图。
35.图5是本优选实施例的基于svg的构建蜘蛛网效果图的方法的流程图。
36.图6是本实施例的基于svg的构建蜘蛛网效果图的装置的结构框图。
具体实施方式
37.为更清楚地理解本技术的目的、技术方案和优点，下面结合附图和实施例，对本技术进行了描述和说明。
38.除另作定义外，本技术所涉及的技术术语或者科学术语应具有本技术所属技术领域具备一般技能的人所理解的一般含义。在本技术中的“一”、“一个”、“一种”、“该”、“这些”等类似的词并不表示数量上的限制，它们可以是单数或者复数。在本技术中所涉及的术语“包括”、“包含”、“具有”及其任何变体，其目的是涵盖不排他的包含；例如，包含一系列步骤或模块(单元)的过程、方法和系统、产品或设备并未限定于列出的步骤或模块(单元)，而可包括未列出的步骤或模块(单元)，或者可包括这些过程、方法、产品或设备固有的其他步骤或模块(单元)。在本技术中所涉及的“连接”、“相连”、“耦接”等类似的词语并不限定于物理的或机械连接，而可以包括电气连接，无论是直接连接还是间接连接。在本技术中所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“a和/或b”可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。通常情况下，字符“/”表示前后关联的对象是一种“或”的关系。在本技术中所涉及的术语“第一”、“第二”、“第三”等，只是对相似对象进行区分，并不代表针对对象的特定排序。
39.在本实施例中提供的方法实施例可以在终端、计算机或者类似的运算装置中执行。比如在终端上运行，图1是本实施例的基于svg的构建蜘蛛网效果图的方法的终端的硬件结构框图。如图1所示，终端可以包括一个或多个(图1中仅示出一个)处理器102和用于存储数据的存储器104，其中，处理器102可以包括但不限于微处理器mcu或可编程逻辑器件fpga等的处理装置。上述终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述终端的结构造成限制。例如，终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示出的不
同配置。
40.存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如在本实施例中的基于svg的构建蜘蛛网效果图的方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
41.传输设备106用于经由一个网络接收或者发送数据。上述的网络包括终端的通信供应商提供的无线网络。在一个实例中，传输设备106包括一个网络适配器(network interface controller，简称为nic)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备106可以为射频(radio frequency，简称为rf)模块，其用于通过无线方式与互联网进行通讯。
42.在本实施例中提供了一种基于svg的构建蜘蛛网效果图的系统，图2是本实施例的基于svg的构建蜘蛛网效果图的系统的结构示意图，如图2所示，该系统包括web客户端10和web服务器20。
43.web客户端10，将客户输入的数据发送至web服务器20；
44.web服务器20，根据客户输入的数据，创建可缩放矢量图形svg容器，根据svg容器的大小，确定最大圆形半径；根据最大圆形半径，创建若干个底圆，构建蜘蛛网效果图的底图；根据客户输入的数据，确定分布在底图上的数据点的个数和位置；根据底圆的圆心、数据点的个数和位置及底圆，构建蜘蛛网效果图；其中，若干个底圆同心。
45.通过上述步骤，根据客户输入的数据，创建可缩放矢量图形svg容器，根据svg容器的大小，确定最大圆形半径；根据最大圆形半径，创建若干个底圆，构建蜘蛛网效果图的底图；根据客户输入的数据，确定分布在底图上的数据点的个数和位置；根据底圆的圆心、数据点的个数和位置及底圆，构建蜘蛛网效果图，解决现有技术中在web数据可视化领域，不能动态展示数据、进行数据对比分析及对数据操作的问题，实现了将不同的数据集依据算法在图形上展示，达到数据可视化的效果。
46.在其中的一些实施例中，系统还包括可视化数据对比分析展示模块和/或交互模块。
47.具体的，参考图3，基于svg的构建蜘蛛网效果图的系统主要由网页层、服务层和数据层构成，网页层主要展示蜘蛛网效果图等信息，页面布局及功能组件采用html5编写，加载转换后的svg文件，将蜘蛛网效果图等信息展现出来。服务层中主要是实现业务逻辑和规则，采用spring脚本实现系统数据管理，通过发布web services实现网页和交互系统其他部分的数据交互。数据层主要是存储系统中的各种数据，提供持久的数据服务。数据访问组件为jdbc，c3p0对连接池实施管理，实现数据库与系统其他部分的兼容。
48.进一步的，系统硬件结构主要由控制器、oled显示器、存储器、服务器、用户终端等构成，通过svg技术将客户输入的数据文件转换为蜘蛛网效果图，然后通过对蜘蛛网效果图上链接的点击等操作实现交互。通过控制器、oled显示器、存储器、键盘、服务器、用户终端等完成系统硬件设计，通过applet技术和javascript语言将svg文件转换为蜘蛛网效果图，
完成系统软件设计。
49.在本实施例中提供了一种基于svg的构建蜘蛛网效果图的方法，图4是本实施例的基于svg的构建蜘蛛网效果图的方法的流程图，如图4所示，该流程包括如下步骤：
50.步骤s401，根据客户输入的数据，创建可缩放矢量图形svg容器；
51.步骤s402，根据svg容器大小确定最大圆形半径；根据最大圆形半径，创建若干个底圆，构成蜘蛛网效果图的底图；
52.具体的，通过svg中append方法，创建不同半径大小的圆形，作为蜘蛛网的底图。
53.具体的，先用svg中append函数依次添加5个底圆，圆心位置相同，半径依次增加，最小半径圆形在最上面，最大半径圆形在最下面，形成一个二维平面圆形堆叠的蜘蛛网效果图的底图。
54.步骤s403，根据客户输入的数据，确定分布在蜘蛛网底图上的数据点的个数和位置；
55.具体的，拿到需要对比分析的数据集后，确定需要分布在圆形上数据点的个数，算出每个点的间隔弧度defaultradius((2*math.pi/360)*(360/数据点的个数))，依据圆形上点的坐标算法，即x1＝x0 r*cosθ，y1＝y0 r*sinθ,算出每个点在圆上的位置，pi是弧度制的π，math.pi＝3.14，即180
°
。
56.步骤s404，根据底圆的圆心、数据点的个数和位置及底圆，构建蜘蛛网效果图；其中，若干个底圆同心。
57.具体的，从底圆的圆心向每个数据点连线，不同角度的实线与底部的圆形纵横交错，即可形成蜘蛛网效果图。
58.通过上述步骤，根据客户输入的数据，创建可缩放矢量图形svg容器，根据svg容器大小确定最大圆形半径；根据最大圆形半径，创建若干个底圆，构成蜘蛛网效果图的底图，根据客户输入的数据，确定分布在蜘蛛网底图上的数据点个数和位置，根据底圆的圆心、数据点的个数和位置及底圆，构建蜘蛛网效果图。解决了现有技术中其他可视化工具构建蜘蛛网效果图中不能实现数据分析功能的问题，实现了动态生成该图形特效，并支持数据比较分析的效果。
59.在其中的一些实施例中，该方法还包括对所述蜘蛛网效果图的可视化数据进行对比分析展示。
60.具体的，根据数据集的大小，使用d3中的scalelinear进行映射，映射范围为1到最大圆形半径，即可得出该数据集的圆形半径，依据该圆形半径，再次利用圆形上点的坐标算法，求出该数据所在的点的位置。利用svg将圆心与该点连接起来，即可将该数据集显示为一体实线，根据数据的大小，实线的长短各不相同，即可一目了然数据集的大小分布，进而容易比较。
61.进一步的，svg是基于xml的二维矢量图格式，使用svg不仅便于绘图，还可以利用web程序中操作dom的方式操作svg，便于实现交互和动画。d3就是一个比较流行的基于数据的javascript库，是在protovis的基础上开发的数据驱动的可视化库，添加了scale、layout等模块。线性比例尺scalelinear就是把一组输入域映射到输出域的函数。使用d3中的scalelinear进行映射一组线性的定义域映射到一组线性的值域当中。每个值域中的值y可以表示为定义域中的值x的函数：y＝mx b。使用d3.scalelinear()创造一个线性比例
尺，遍历数据集的大小，映射范围为1到最大圆形半径，得出该数据集的圆形半径。
62.在其中的一些实施例中，蜘蛛网效果图中还设置有链接，当点击链接时，对链接所携带的详细信息进行显示。
63.具体的，蜘蛛网效果图中的链接可以设置在数据点上，可使用svg添加鼠标交互操作，将鼠标移动到该数据点的位置，可展示该数据点所携带的其他详细信息。
64.在其中的一些实施例中，该方法还通过svg，创建不同半径的所述底圆，构成所述蜘蛛网效果图的底图。
65.在其中的一些实施例中，根据底圆的圆心、数据点的个数和位置及底圆，构成蜘蛛网效果图包括：根据分布在底圆上数据点的个数，计算出每个数据点的间隔弧度，根据底圆上的数据点的坐标算法,算出每个数据点在底圆上的位置，使用svg生成与数据点个数相同数量的蜘蛛网效果图的实线。
66.在其中的一些实施例中，蜘蛛网效果图还用于对可视化数据进行对比分析展示包括：对客户输入的数据进行映射，得到数据的圆形半径，根据数据的圆形半径，创建蜘蛛网效果图的底圆，结合数据点的坐标算法，计算出数据点在底圆上的坐标点，利用svg将圆心与坐标点连接起来，得到蜘蛛网效果图的实线。
67.下面通过优选实施例对本实施例进行描述和说明。
68.图5是本优选实施例的基于svg的构建蜘蛛网效果图的方法的流程图，如图5所示，该基于svg的构建蜘蛛网效果图的方法包括如下步骤：
69.步骤s501，生成svg容器实例，设置最大圆形半径，设置基本圆周弧度。
70.具体的，创建svg容器实例并确定宽高，设置最大圆形半径变量circleradius(以需要展示容器范围宽度的一半),设置基本的圆周弧度，根据公式【角度*(pi*2/360)】，以简单图形设置为有10条数据为例，因此会生成10条蛛网底线，此时一个数据点的角度为(360/10)
°
。
71.步骤s502，添加底圆，形成二维平面圆形堆叠效果。
72.具体的，先用svg中append函数依次添加5个底圆，圆心位置相同，半径依次增加，最小半径圆形在最上面，最大半径圆形在最下面，形成一个二维平面圆形堆叠效果。
73.步骤s503，遍历数据集大小，创建蛛网底线。
74.具体的，创建蛛网底线，根据数据有多少，遍历生成多少条蛛网底线。蛛网底线以5个底圆的共同圆心为起点，起点坐标记为(x0,y0),以最大圆周作为终点，终点坐标记为(x1,y1)，根据公式x1＝x0 r*cos(angle*pi/180)、y1＝y0 r*sin(angle*pi/180)，求得蛛网底线在最大圆周上对应的终点的坐标，使用svg中的append函数，最终生成10条蛛网的底线。
75.具体的，这里就是根据最大圆形，生成图形底线，比如有10条数据，就生成10条底线，这里的跟数据集的关系只有个数关系，r是最大圆形半径，角度是前面设置的基本弧度。
76.步骤s504，将数据集映射为圆形半径，覆盖在蛛网的底线上。
77.具体的，生成数据点的实线，不同的数据点按照亮色覆盖在蛛网的底线上，将数据大小转换为数据实线的长短进行展示，从而可以直观看出数据间大小，从而更利于分析。运用d3.js中的比例尺概念，设定适合的比例尺，将数据集从大到小进行映射，映射范围为1到容器范围内最大半径。映射之后的值即为该数据点所在圆的半径，再根据求圆上对应点的
坐标公式，即x1＝x0 r*cos(angle*pi/180)、y1＝y0 r*sin(angle*pi/180)，根据设定的比例尺和终点坐标(x1,y1)，确定该数据点的坐标(x2,y2)，使用svg中的append函数，即可生成数据实线，x1和x2对应的半径取值不同，x2的半径取值是根据数据大小转换成的半径值。
78.步骤s505，添加数据详细信息，并添加点击交互。
79.具体的，根据数据点的坐标(x2,y2)添加相应的图标或文字，进行数据信息展示，并添加点击事件，支持与web页面内容的其他组件交互或进行下钻。
80.需要说明的是，在上述流程中或者附图的流程图中示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
81.在本实施例中还提供了一种基于svg的构建蜘蛛网效果图的装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。以下所使用的术语“模块”、“单元”、“子单元”等可以实现预定功能的软件和/或硬件的组合。尽管在以下实施例中所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
82.图6是本实施例的基于svg的构建蜘蛛网效果图的装置的结构框图，如图6所示，该装置包括：
83.创建模块30，创建模块30用于根据客户输入的数据，创建可缩放矢量图形svg容器；
84.确定模块40，确定模块40用于根据svg容器大小确定最大圆形半径；根据最大圆形半径，创建若干个底圆，构成蜘蛛网效果图的底图；
85.计算模块50，计算模块50用于根据客户输入的数据，确定分布在蜘蛛网底图上的数据点个数和位置；
86.构建模块60，构建模块60用于根据底圆的圆心、数据点的个数和位置及底圆，构成蜘蛛网效果图；其中，若干个底圆同心。
87.需要说明的是，上述各个模块可以是功能模块也可以是程序模块，既可以通过软件来实现，也可以通过硬件来实现。对于通过硬件来实现的模块而言，上述各个模块可以位于同一处理器中；或者上述各个模块还可以按照任意组合的形式分别位于不同的处理器中。
88.在本实施例中还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
89.可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。
90.可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：
91.s1，根据客户输入的数据，创建可缩放矢量图形svg容器；
92.s2，根据svg容器大小确定最大圆形半径；根据最大圆形半径，创建若干个底圆，构成蜘蛛网效果图的底图；
93.s3，根据客户输入的数据，确定分布在蜘蛛网底图上的数据点个数和位置；
94.s4，根据底圆的圆心、数据点的个数和位置及底圆，构建蜘蛛网效果图；其中，若干个底圆同心。
95.需要说明的是，在本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，在本实施例中不再赘述。
96.此外，结合上述实施例中提供的基于svg的构建蜘蛛网效果图的方法，在本实施例中还可以提供一种存储介质来实现。该存储介质上存储有计算机程序；该计算机程序被处理器执行时实现上述实施例中的任意一种基于svg的构建蜘蛛网效果图的方法。
97.应该明白的是，这里描述的具体实施例只是用来解释这个应用，而不是用来对它进行限定。根据本技术提供的实施例，本领域普通技术人员在不进行创造性劳动的情况下得到的所有其它实施例，均属本技术保护范围。
98.显然，附图只是本技术的一些例子或实施例，对本领域的普通技术人员来说，也可以根据这些附图将本技术适用于其他类似情况，但无需付出创造性劳动。另外，可以理解的是，尽管在此开发过程中所做的工作可能是复杂和漫长的，但是，对于本领域的普通技术人员来说，根据本技术披露的技术内容进行的某些设计、制造或生产等更改仅是常规的技术手段，不应被视为本技术公开的内容不足。
[0099]“实施例”一词在本技术中指的是结合实施例描述的具体特征、结构或特性可以包括在本技术的至少一个实施例中。该短语出现在说明书中的各个位置并不一定意味着相同的实施例，也不意味着与其它实施例相互排斥而具有独立性或可供选择。本领域的普通技术人员能够清楚或隐含地理解的是，本技术中描述的实施例在没有冲突的情况下，可以与其它实施例结合。
[0100]
以上所述实施例仅表达了本技术的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对专利保护范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本技术构思的前提下，还可以做出若干变形和改进，这些都属于本技术的保护范围。因此，本技术的保护范围应以所附权利要求为准。