CN108492346A - 实现图表组件的方法及装置 - Google Patents

Abstract

本发明公开实现图表组件的方法及装置，包括：根据预定的图表类型绘制对应图表，生成与图表类型相对应的图表数据；针对各个图表类型创建对应的图表组件，所述图表组件在传入的图表数据变化时根据所述图表数据重新绘制图表；根据图表类型将所生产的图表数据传入对应的图表组件；将各个类型的图表组件进行发布。本发明能够针对定制的图表类型生成图表组件，在图表组件发布后，项目可应用图表组件进行绘制，满足了较高定制的图表绘制的要求，并节约了开发成本。

Description

实现图表组件的方法及装置

技术领域

本发明属于软件开发技术领域，尤其涉及实现图表组件的方法及装置。

背景技术

相关技术中，在根据数据绘制可视化的图表时，可以使用已有工具，例如Echart(电子图表工具)，来进行绘制。Echart工具基于画布技术，使用图表库中图表进行绘制。

虽然，Echart工具也支持个性化的卷定制，开发者可以通过API(应用程序编程接口，Application Programming Interface)配置来实现预设效果。但是，Echart工具使得开发者在进行图表绘制时受限于API配置，无法满足定制性较高的图表绘制的要求，特别是无法满足DUI(Dialogue User Interface,以对话为核心的人机交互界面)平台的图表绘制要求。因此，需要提供一种新的技术方案以解决上述技术问题。

发明内容

本发明实施例提供一种实现图表组件的方法及装置，用于至少解决上述技术问题之一。

第一方面，本发明实施例提供一种实现图表组件的方法，包括：根据预定的图表类型绘制对应图表，生成与图表类型相对应的图表数据；针对各个图表类型创建对应的图表组件，所述图表组件在传入的图表数据变化时根据所述图表数据重新绘制图表；根据图表类型将所生产的图表数据传入对应的图表组件；将各个类型的图表组件进行发布。

第二方面，本发明实施例提供一种实现图表组件的装置，包括：图表绘制模块，用于根据预定的图表类型绘制对应图表，生成与图表类型相对应的图表数据；图表组件创建模块，用于针对各个图表类型创建对应的图表组件，所述图表组件在传入的图表数据变化时根据所述图表数据重新绘制图表；图表数据传入模块，用于根据图表类型将所生产的图表数据传入对应的图表组件；图表组件发布模块，用于将各个类型的图表组件进行发布。

第三方面，提供一种电子设备，其包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例的实现图表组件的方法的步骤。

第四方面，本发明实施例还提供一种计算机程序产品，所述计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使所述计算机执行本发明任一实施例的实现图表组件的方法的步骤。

本发明实施例的有益效果在于：根据预定的图表类型绘制对应图表，生成与图表类型相对应的图表数据；针对各个图表类型创建对应的图表组件，图表组件在传入的图表数据变化时根据图表数据重新绘制图表；根据图表类型将所生产的图表数据传入对应的图表组件；将各个类型的图表组件进行发布。因此，本发明实施例的可以针对定制的图表类型生成图表组件，在图表组件发布后，项目可应用图表组件进行绘制，满足了较高定制的图表绘制的要求，并节约了开发成本；此外由于图表组件能够在传入的图表数据变化时根据图表数据重新绘制图表，使得图表可以自动进行动态更新，由此开发者可以将注意力主要放在业务逻辑性上，而无需关注图表刷新问题，因而实现了图表刷新自动化，提高了开发效率。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明的实现图表组件的方法一实施例的流程图；

图2为用于显示对话数据的图表；

图3为用于显示语音定制环节分析的图表；

图4为用于显示语音请求区域分布的图表；

图5为用于显示语音识别请求数的图表；

图6为用于显示语音命中率的图表；

图7为本发明的绘制图表的操作一实施例的流程图；

图8为本发明的图表自动更新的操作一实施例的流程图；

图9为本发明的向图表组件传入数据的操作一实施例的流程图；

图10为本发明的实现图表组件的装置一实施例的原理框图；

图11为本发明的实现图表组件的装置一实施例的原理框图。

具体实施方式

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

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、元件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

在本发明中，“模块”、“系统”等等指应用于计算机的相关实体，如硬件、硬件和软件的组合、软件或执行中的软件等。详细地说，例如，元件可以、但不限于是运行于处理器的过程、处理器、对象、可执行元件、执行线程、程序和/或计算机。还有，运行于服务器上的应用程序或脚本程序、服务器都可以是元件。一个或多个元件可在执行的过程和/或线程中，并且元件可以在一台计算机上本地化和/或分布在两台或多台计算机之间，并可以由各种计算机可读介质运行。元件还可以根据具有一个或多个数据包的信号，例如，来自一个与本地系统、分布式系统中另一元件交互的，和/或在因特网的网络通过信号与其它系统交互的数据的信号通过本地和/或远程过程来进行通信。

最后，还需要说明的是，在本文中，术语“包括”、“包含”，不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

如图1所示，本发明的一实施例的实现图表组件的方法，包括如下步骤。

在步骤S110中，根据预定的图表类型绘制对应图表，生成与图表类型相对应的图表数据。

举例而言，在DUI平台中，开发者可以根据DUI平台的特点来预设图表类型。例如，在进行语音对话分析时，对话数据可包含时长和轮数两个概念。使用轮数概念是因为当用户的需求比较复杂时，可能需要分多轮进行陈述，用户也可能在对话过程中不断修改或完善自己的需求。此外，当用户的陈述的需求不够具体或明确的时候，语音识别系统可通过询问、澄清或确认来帮助用户找到满意的结果。因此，多轮对话是一个决策过程，机器在对话过程中不断根据当前的状态决策下一步应该采取的最优动作。因此，对话轮数与时长可以表现语音识别对用户需求的理解程度，体现了语音识别的准确性。因此，在图表中以标签切换的形式，对多个不同维度的图表做并行展示，如图2所示，选择多线图表现不同日期内N轮对话数。

在进行语音定制环节分析时，为了分析DUI平台的操作过程中每个环节业务量与上一个环节之间的差异，合理地分析对话定制流程的流量瓶颈，选择使用漏斗图，如图3所示，每层梯形的高度随数据的大小按比例变化。

在分析语音请求区域分布时，为表现语音请求在不同地区响应的分布情况，可使用气泡地图，即气泡图和地图的结合，以地图为背景，将圆(气泡)展示在某个指定的地理区域内，如图4所示，气泡的面积代表了语音请求数据量的大小。该图的优势在于可以清晰地体现出分布地区与分布数量级两个维度的数据。

在分析语音识别时段时，为体现时段对语音识别请求数的影响，分析请求的高峰时段，可选用折线图，如图5所示，以小时为单位进行分析与展现。

在分析语音识别命中率时，用户使用命中技能条数占对话(产品请求)数的比例，可以在一定程度上反馈语音识别的准确率，因此对饼图做一定的变形，在饼图中心显示有效请求次数的数额与具体占比，如图6所示，以求只管表现语音识别命中准确率。

基于上述举例，针对DUI平台的图表显示，可以预设如下图表类型中的一种或多种：柱状图(也称为直方图)、饼图、面积图、线图、组合图、地图、词云、漏斗图、热力图和树图。

在一实施例中，如图7所示，所述根据预定的图表类型绘制对应图表可包括如下步骤。

在步骤S702中，获取待绘制的数据。

在步骤S704中，将所获取的数据处理成适于绘制图表的数据。

在步骤S706中，应用处理后的数据进行图表绘制。

进一步地，所述应用处理后的数据进行图表绘制可包括：创建画布、比例尺和坐标；在所创建的画布中使用所创建的比例尺和坐标，根据图表类型调用接口来将处理后的数据绘制成图表。

举例而言，可以利用D3(数据驱动文档，Data-Driven-Document)工具来进行图表绘制。D3为一个JavaScript(为一种直译式脚本语言)库，它可以通过数据来操作文档。D3可直接对DOM(文档对象模型，Document Object Model)进行操作，它可设置单独的对象以及功能集，并通过API进行DOM调用，体现出诸如CSS3(层叠样式表，Cascading StyleSheets)，HTML5(超文本标记语言，HyperText Markup Language)和SVG(可缩放矢量图形，Scalable Vector Graphics)等Web标准的全部功能。

D3工具在进行图表绘制时，首先会获取待绘制的数据，然后对获取的数据进行处理，将获取的数据转换为适于绘制图表的数据。对数据的处理可以通过预设操作完成，也可以通过布局函数完成。在D3工具中，提供了包括饼布局与矩形树布局在内的12种布局的布局函数。因此，可以使用D3工具中的布局函数，在相应的图表类型中运用来完成数据处理。

对于处理后的数据，可利用D3工具开始进行图表绘制。首先，利用D3工具创建画布、比例尺和坐标。其中，画布为图表展示的区域，默认尺寸＝外层容器宽×高。为方便控制图表边距，在设计API时引入margin参数(margin＝{left,right,top,bottom}，空白＝{左，右，顶，底})来定义外边距，实际图表尺寸为：宽度＝外层容器宽-(左边距+右边距)，高度＝外层容器高-(上边距+下边距)。

D3工具的比例尺对象包含：domain(定义域)和range(值域)。从输入(I)-输出(O)的数值类别角度，可以分为如下类别：

连续(I)-连续(O)，绘制线性坐标(scaleLinear)或时序坐标(scaleTime)时使用；

离散(I)-离散(O)，绘制柱状图(scaleBand)或输入值离散的情况使用；

连续(I)-离散(O)，接收数组形式的输入值并映射到离散值,如在热力图中使用的scaleQuantile用以映射数值对应的颜色。

在实现图表组件时，还可以根据不同图表类型需求使用不同的坐标轴映射形式，对于某些或某个图表类型，如线图,根据需要开放了坐标轴分类的API，可以通过配置xType(X轴类型)更换比例尺类型。

在所创建的画布中，使用所创建的比例尺和坐标，可以根据图表类型调用不同的几何图形接口进行绘制，例如，调用弧形(d3.arc)、线形(d3.line)、面积(d3.area)、各种多边形的接口。

在上述实施例中，使用D3工具细粒度地控制图表的灵活性，当出现复杂需求时方便进行底层开发，规避了使用echarts等图表库无法实现需求，又对源码无从下手的情形。

在步骤S120中，针对各个图表类型创建对应的图表组件。

其中，图表组件在传入的图表数据变化时根据所述图表数据重新绘制图表。

在一实施例中，所述针对各个图表类型创建对应的图表组件可包括：针对各个图表类型，利用基于模型视图视图模型MVVM框架的工具创建对应的图表组件，使得所创建的图表组件在创建图表组件实例并进行模板编译之后，当传入变化的图表数据时，根据传入的变化的图表数据重新绘制图表。

例如，可以使用VUE工具进行图表组件创建。VUE工具是用于构建数据驱动系统的JavaScript库，其核心在于数据驱动视图，即一旦创建了绑定，DOM将与数据保持同步。组件是VUE的功能之一，它提供了一种抽象、独立、可复用的小组件。在本发明的实施例中可以借助VUE工具来创建图表组件。

VUE工具基于数据驱动视图的MVVM(模型视图视图模型，Model-View-ViewModel)框架，VUE工具创建的图表组件可通过如下步骤，实现依据数据变化自动刷新图表的操作。如图8所示，所述步骤可包括：

在步骤S802中，创建图表组件实例。

在步骤S804中，完成图表组件实例创建。

在步骤S806中，进行模板编译。

在步骤S808中，完成模板编译。

在步骤S810中，初始化图表组件。

在步骤S812中，判断传入数据是否为空，如果为空，执行步骤S814，否则，执行步骤S816。

在步骤S814中，创建空图表。

在步骤S816中，清空图表元素，重新绘制图表。

在步骤S818中，销毁图表组件。

其中，可使用onData方法初始化图表，并在数据变更时调用。在数据变化时，使用watch(看门)属性监听其变化，并进行判断：当数据为空时，可显示“暂无数据”，否则，重新绘制图表，从而达到动态更新的效果。

通过实现自动刷新，可以使得图表组件使用者将注意力放在业务逻辑上,当筛选的时间区间或者范围有变化时，传入数据变更，图表组件视图会自动进行更新，提高了用户使用的便捷性，并提高了用户的开发效率。

在步骤S130中，根据图表类型将所生产的图表数据传入对应的图表组件。

在一实施例中，如图9所示，所述根据图表类型将所生产的图表数据传入对应的图表组件包括：

在步骤S902中，根据图表类型确定对应的图表组件。

在步骤S904中，通过所述对应的图表组件的父组件将所述图表数据传入所述对应的图表组件。

在本发明实施例中，图表组件为可配置的,即对于一种类型的图表组件,父组件向该图标组件传递数据与配置参数，从而在页面中产生多个不同的图表实例。

在使用VUE工具创建图表组件时，所创建的图表组件的作用域是独立的，即作为子组件的图表组件不能直接引用到父组件的数据，因此使用图表组件的props选项进行数据传递。

以barChart(柱状图)为例进行说明，对于该图表组件，提供如表1所示接口，表1中示出了部分API。

表1

表1中的参数可通过props进行传递，在图表组件内，当接收到这些参数时，还会对参数进行必要的非空监测与类型检测。部分props无法直接使用，因此需要对VUE工具生成的图表组件进行修改。在图表组件的computed属性中，进行处理来生成一个新的属性，将新的属性运用到图表组件的绘制中。

在本发明的实施例中，将D3工具和VUE工具结合使用，能够将数据与DOM解耦，使得开发者只需将注意力放在业务逻辑上便可，通过引用组件→传递数据→完善配置项几个步骤就能实现丰富的可视化功能,提高了开发效率。

在步骤S140中，将各个类型的图表组件进行发布。

在一实施例中，所述将各个类型的图表组件进行发布可包括：创建私有NPM(节点包管理，Node Package Management)仓库，向私有NPM仓库配置代理地址，将图表组件作为NPM包放置于NPM仓库中，所述私有NPM仓库在通过所述代理地址完成登录的项目请求下载图表组件时，获取所述图表组件进行返回。

举例而言，可使用Verdeccio服务搭建了私有NPM仓库,并使用pm2进行进程守护,进而代替了付费的企业私有NPM服务器。使用仓库的过程中,通过设置registry(寄存)将NPM代理地址指向私有仓库,从仓库上寻找包并进行下载。具体的，发布的过程包括：创建私有NPM仓库，将所述图表组件打包为NPM包并上传于所述私有仓库中，并将私有仓库地址配置为NPM的代理地址。其他项目可从所述代理地址的私有NPM仓库中获取所述图表组件进行返回。

私有NPM的服务机制可包括：

(1)私有包：从私有仓库返回包。

(2)外部包，私有仓库无缓存：从默认外部registry下载到私有仓库(例如，下载至缓存)后，返回包。

(3)外部包，私有仓库有缓存：从私有仓库返回包。

私有NPM配置成功之后，只需如下4步就可以实现包的发布。

第1步，设置代理地址；

第2步，NPM私有仓库登录；

第3步，更新package.json(项目的配置文件)中的版本号。

第4步，图表组件发布。

在本实施例中，通过使用私有NPM，在使用作为私有包的图表组件的同时，也能继续使用NPM生态的其他组件。

在另一实施例中，所述将各个类型的图表组件进行发布可包括：将图表组件放置于预设路径下，在项目的配置文件中定义所述预设路径，在所述图表组件被引用后，对所述图表组件进行全局注册。

举例而言，结合webpack打包技术，可通过修改配置项来将图表组件打包在dist文件夹下，并在package.json文件中定义入口文件地址。在引用图表组件后，通过使用Vue.component方法来全局注册图表组件。如此，便可在DUI平台的任意VUE项目中使用图表组件。

在本发明实施例中，可以针对定制的图表类型生成图表组件，在图表组件发布后，项目可应用图表组件进行绘制，满足了较高定制的图表绘制的要求，并节约了开发成本；此外由于图表组件能够在传入的图表数据变化时根据图表数据重新绘制图表，使得图表可以自动进行动态更新，由此开发者可以将注意力主要放在业务逻辑性上，而无需关注图表刷新问题，因而实现了图表刷新自动化，提高了开发效率。

在一实施例中，本发明的方法还可包括如下操作中的至少一者。

指令监听图表组件的尺寸变化，当图表组件的尺寸发生变化时，触发进行图表组件的重新绘制。

举例而言，可引用vue-resize-directive来指令监听图表组件的尺寸变化，当图表组件变化时触发重绘方法，重现绘制图表。如此,能够在浏览器窗口大小变化后，实现图表的动态自适应。

在图表组件中引用第三方提示框，查找提示框位置，按配置制作提示框中所显示的内容。

举例而言，在图表组件中引用第三方提示框D3-tip,结合D3对数组的二分查找法计算tooltip(提示框)的位置，按配置制作tooltip中所显示的内容。如此，扩展了图表组件的功能，能够自定义提示框显示的内容，进而实现了样式美观且格式可配置的提示框功能。

在图表组件中引用第三方指示框D3-tip,结合D3对数组的二分查找法计算tooltip的位置,自定义tooltip显示的内容；实现了样式美观,且格式可配置的提示框功能。

在图表组件中引入第三方图例组件来控制图例元素的位置。

举例而言，在多维图表组件中引用第三方图例组件D3-legend，通过D3控制图例元素的位置。如此，实现了可配置显示类型的图例功能。

采用本发明实施例中实现图表组件的方法，能够针对定制的图表类型生成图表组件，在图表组件发布后，项目可应用图表组件进行绘制，满足了较高定制的图表绘制的要求，并节约了开发成本。由于图表组件能够在传入的图表数据变化时根据图表数据重新绘制图表，使得图表可以自动进行动态更新，由此开发者可以将注意力主要放在业务逻辑性上，而无需关注图表刷新问题，因而实现了图表刷新自动化，提高了开发效率。此外，通过扩展图表组件功能，进一步增强了图表组件的功能，提高了图表开发的效率。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作合并，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

如图10所示，本发明实施例还提供一种实现图表组件的装置1000，包括：

图表绘制模块1010，用于根据预定的图表类型绘制对应图表，生成与图表类型相对应的图表数据；

图表组件创建模块1020，用于针对各个图表类型创建对应的图表组件，所述图表组件在传入的图表数据变化时根据所述图表数据重新绘制图表；

图表数据传入模块1030，用于根据图表类型将所生产的图表数据传入对应的图表组件；

图表组件发布模块1040，用于将各个类型的图表组件进行发布。

在一实施例中，图表绘制模块1010可用于获取待绘制的数据；将所获取的数据处理成适于绘制图表的数据；应用处理后的数据进行图表绘制。

进一步地，图表绘制模块1010用于创建画布、比例尺和坐标；在所创建的画布中使用所创建的比例尺和坐标，根据图表类型调用接口来将处理后的数据绘制成图表。

在一实施例中，图表组件创建模块1020用于针对各个图表类型，利用基于模型视图视图模型MVVM框架的工具创建对应的图表组件，使得所创建的图表组件在创建图表组件实例并进行模板编译之后，当传入变化的图表数据时，根据传入的变化的图表数据重新绘制图表。

在一实施例中，图表数据传入模块1030用于根据图表类型确定对应的图表组件；通过所述对应的图表组件的父组件将所述图表数据传入所述对应的图表组件。

在一实施例中，图表组件发布模块1040用于创建私有节点包管理NPM仓库，向所述私有NPM仓库配置代理地址，将图表组件作为NPM包放置于NPM仓库中，所述私有NPM仓库在通过所述代理地址完成登录的项目请求下载图表组件时，获取所述图表组件进行返回；或者将图表组件放置于预设路径下，在项目的配置文件中定义所述预设路径，在所述图表组件被引用后，对所述图表组件进行全局注册。

在一实施例中，如图11所示，装置还可包括用于如下操作中的至少一者的图表组件增强模块1102，所述如下操作包括：

指令监听图表组件的尺寸变化，当图表组件的尺寸发生变化时，触发进行图表组件的重新绘制；

在图表组件中引用第三方提示框，查找提示框位置，按配置制作提示框中所显示的内容；以及

在图表组件中引入第三方图例组件来控制图例元素的位置。

上述本发明实施例的装置可用于执行本发明中相应的方法实施例，并相应的达到上述本发明方法实施例所达到的技术效果，这里不再赘述。

本发明实施例中可以通过硬件处理器(hardware processor)来实现相关功能模块。

另一方面，本发明实施例提供一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现以下步骤：

根据预定的图表类型绘制对应图表，生成与图表类型相对应的图表数据；

针对各个图表类型创建对应的图表组件，所述图表组件在传入的图表数据变化时根据所述图表数据重新绘制图表；

根据图表类型将所生产的图表数据传入对应的图表组件；

将各个类型的图表组件进行发布。

可选的，所述根据预定的图表类型绘制对应图表包括：获取待绘制的数据；将所获取的数据处理成适于绘制图表的数据；应用处理后的数据进行图表绘制。

可选的，所述应用处理后的数据进行图表绘制包括：创建画布、比例尺和坐标；在所创建的画布中使用所创建的比例尺和坐标，根据图表类型调用接口来将处理后的数据绘制成图表。

可选的，所述针对各个图表类型创建对应的图表组件包括：针对各个图表类型，利用基于模型视图视图模型MVVM框架的工具创建对应的图表组件，使得所创建的图表组件在创建图表组件实例并进行模板编译之后，当传入变化的图表数据时，根据传入的变化的图表数据重新绘制图表。

可选的，所述根据图表类型将所生产的图表数据传入对应的图表组件包括：根据图表类型确定对应的图表组件；通过所述对应的图表组件的父组件将所述图表数据传入所述对应的图表组件。

可选的，所述将各个类型的图表组件进行发布包括：创建私有节点包管理NPM仓库，向所述私有NPM仓库配置代理地址，将图表组件作为NPM包放置于NPM仓库中，所述私有NPM仓库在通过所述代理地址完成登录的项目请求下载图表组件时，获取所述图表组件进行返回；或者将图表组件放置于预设路径下，在项目的配置文件中定义所述预设路径，在所述图表组件被引用后，对所述图表组件进行全局注册。

可选的，所述方法还包括如下操作中的至少一者：

指令监听图表组件的尺寸变化，当图表组件的尺寸发生变化时，触发进行图表组件的重新绘制；

在图表组件中引用第三方提示框，查找提示框位置，按配置制作提示框中所显示的内容；以及

在图表组件中引入第三方图例组件来控制图例元素的位置。

上述产品可执行本申请实施例所提供的方法，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本申请实施例所提供的方法。

本发明实施例还提供一种电子设备，其包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例的实现图表组件的方法的步骤。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (10)

1.一种实现图表组件的方法，包括：

根据预定的图表类型绘制对应图表，生成与图表类型相对应的图表数据；

针对各个图表类型创建对应的图表组件，所述图表组件在传入的图表数据变化时根据所述图表数据重新绘制图表；

根据图表类型将所生产的图表数据传入对应的图表组件；

将各个类型的图表组件进行发布。

2.根据权利要求1所述的方法，其中，所述根据预定的图表类型绘制对应图表包括：

获取待绘制的数据；

将所获取的数据处理成适于绘制图表的数据；

应用处理后的数据进行图表绘制。

3.根据权利要求2所述的方法，其中，所述应用处理后的数据进行图表绘制包括：

创建画布、比例尺和坐标；

在所创建的画布中使用所创建的比例尺和坐标，根据图表类型调用接口来将处理后的数据绘制成图表。

4.根据权利要求1所述的方法，其中，所述针对各个图表类型创建对应的图表组件包括：

针对各个图表类型，利用基于模型视图视图模型MVVM框架的工具创建对应的图表组件，使得所创建的图表组件在创建图表组件实例并进行模板编译之后，当传入变化的图表数据时，根据传入的变化的图表数据重新绘制图表。

5.根据权利要求1所述的方法，其中，所述根据图表类型将所生产的图表数据传入对应的图表组件包括：

根据图表类型确定对应的图表组件；

通过所述对应的图表组件的父组件将所述图表数据传入所述对应的图表组件。

6.根据权利要求1所述的方法，其中，所述将各个类型的图表组件进行发布包括：

创建私有节点包管理NPM仓库，向所述私有NPM仓库配置代理地址，将图表组件作为NPM包放置于NPM仓库中，所述私有NPM仓库在通过所述代理地址完成登录的项目请求下载图表组件时，获取所述图表组件进行返回；或者

将图表组件放置于预设路径下，在项目的配置文件中定义所述预设路径，在所述图表组件被引用后，对所述图表组件进行全局注册。

7.根据权利要求1所述的方法，其中，所述方法还包括如下操作中的至少一者：

指令监听图表组件的尺寸变化，当图表组件的尺寸发生变化时，触发进行图表组件的重新绘制；

在图表组件中引用第三方提示框，查找提示框位置，按配置制作提示框中所显示的内容；以及

在图表组件中引入第三方图例组件来控制图例元素的位置。

8.一种实现图表组件的装置，包括：

图表绘制模块，用于根据预定的图表类型绘制对应图表，生成与图表类型相对应的图表数据；

图表组件创建模块，用于针对各个图表类型创建对应的图表组件，所述图表组件在传入的图表数据变化时根据所述图表数据重新绘制图表；

图表数据传入模块，用于根据图表类型将所生产的图表数据传入对应的图表组件；

图表组件发布模块，用于将各个类型的图表组件进行发布。

9.根据权利要求8所述的装置，其中，所述图表绘制模块用于获取待绘制的数据；将所获取的数据处理成适于绘制图表的数据；应用处理后的数据进行图表绘制。

10.根据权利要求9所述的装置，其中，所述图表绘制模块用于创建画布、比例尺和坐标；在所创建的画布中使用所创建的比例尺和坐标，根据图表类型调用接口来将处理后的数据绘制成图表。