CN113988033A - 一种基于单元格函数快速实现图表的方法 - Google Patents
一种基于单元格函数快速实现图表的方法 Download PDFInfo
- Publication number
- CN113988033A CN113988033A CN202111229449.1A CN202111229449A CN113988033A CN 113988033 A CN113988033 A CN 113988033A CN 202111229449 A CN202111229449 A CN 202111229449A CN 113988033 A CN113988033 A CN 113988033A
- Authority
- CN
- China
- Prior art keywords
- chart
- data
- function
- class
- loading
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 19
- 230000003915 cell function Effects 0.000 title claims abstract description 9
- 230000006870 function Effects 0.000 claims abstract description 60
- 238000010586 diagram Methods 0.000 claims description 17
- 230000005540 biological transmission Effects 0.000 claims description 3
- 230000003068 static effect Effects 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 4
- 230000000007 visual effect Effects 0.000 description 3
- 238000004364 calculation method Methods 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 2
- 238000013079 data visualisation Methods 0.000 description 2
- 230000007547 defect Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 206010063385 Intellectualisation Diseases 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004883 computer application Methods 0.000 description 1
- 238000009472 formulation Methods 0.000 description 1
- 210000001503 joint Anatomy 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 238000003672 processing method 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
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- 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/186—Templates
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Stored Programmes (AREA)
Abstract
一种基于单元格函数快速实现图表的方法,步骤1、作为模板设计器,步骤2、打开WebSheet模板设计器,扩展单元格引用自定义函数;步骤3、按业务需求编写自定义业务函数实例;步骤4、编写图表库加载数据的统一接口,抽象出图例项类和水平分类标签项,能够使得图表库中所有图表通过统一数据接口的实现完成数据加载,显示图形;步骤5、制定图表,完成数据的异步加载;本发明解决了不同类型图表的数据接口不一样的问题、完成了统一数据来源快速实现各类图表的开发。
Description
技术领域
本发明涉及计算机应用技术领域,特别涉及一种基于单元格函数快速实现图表的方法。
背景技术
图表是我们最常见的数据可视化的应用工具,能够比文字更简洁的描述出人们所想要表达的内容,使得我们的数据表达告别了冗长的文字表达时代。
随着企业信息化、数字化、智能化不断推进,数据可视化图表应用越来越广泛,常规的折线图,柱状图,散点图,饼图,K线图再到可视化的地图,热力图,线图,关系图,甚至BI的漏斗图,仪表盘等深入应用,图表的快速开发将成为亟待解决的技术问题。
现有图表的实现,是基于服务端采用applications,applets,servlets、JSP;或者基于客户端浏览器采用javaScript进行图表组件化,针对不同类型图表提供数据API的设计思路,其具有数据组织结构复杂,数据接口不一致,图表类型转换繁琐等方面的缺点。
发明内容
为了克服上述现有技术的缺陷,本发明的目的在于提供一种基于单元格函数快速实现图表的方法,具有数据规范、接口统一、直观清晰、简单易用的特点。
为了达到上述目的,本发明是通过如下技术方案来实现的:
一种基于单元格函数快速实现图表的方法,包括以下步骤:
步骤1、在Web系统中嵌入采用HTML5 Canvas绘制的类似Excel功能的WebSheet页面,作为模板设计器,在模板设计器中引用Javascript图表库,能够在sheet表单中插入图表,图表包括折线图,柱状图,散点图,饼图、K线图、热力图,线图,关系图;
步骤2、打开WebSheet模板设计器,扩展单元格引用自定义函数,规范自定义函数的标准,编写函数体描述类、函数执行类、回调函数类和返回对象类的抽象实例;
步骤3、按业务需求编写自定义业务函数实例,业务函数是与后台服务进行数据传输得到的结果,全部定义为异步函数,通过步骤2对自定函数的抽象实例进行派生并重写具体内容,异步函数执行类是通过Http Ajax或者Websocket从系统后端拉/推数据,调用回调函数,将实例化返回对象类的具体内容。
步骤4、编写图表库加载数据的统一接口,抽象出图例项类和水平分类标签项,使得图表库中所有图表通过统一数据接口的实现完成数据加载,显示图形。
步骤5、制定图表,WebSheet模板设计器设定表单静态信息、单元格内调用业务函数显示动态数据,插入图表,通过统一数据接口设定图例样式、指定图例项中的标题名称、图例项数据和水平轴标签相互对应的单元格数据集合,图表即可完成数据的异步加载。
本发明的有益效果:
采用本发明,在web系统中,表格和图表能够完美结合,呈现出不同视觉表现形式的数据信息。由单元格数据(来源函数)与图表数据统一的接口对接,快速实现各类图表的展示;解决了不同类型图表的数据接口不一样的问题、完成了统一数据来源(单元格)快速实现各类图表的开发。
附图说明
图1是本发明的单元格函数抽象类图。
图2是本发明的图表数据选择页面图。
具体实施方式
下面结合附图对本发明作进一步详细说明。
本发明的核心思想是:规范单元格数据函数来源统一化,图表数据接口标准化;参照附图说明,自定义单元格数据函数来源统一化过程和图表数据接口标准化过程,快速实现表格和图表的展示;简化各类图表开发和配置。
步骤1、在Web系统中嵌入采用HTML5 Canvas绘制的类似Excel功能的WebSheet页面,作为模板设计器;并在模板设计器中引用Javascript图表库,能够在sheet表单中插入图表,包括折线图,柱状图,散点图,饼图、K线图、热力图,线图,关系图等。
本步骤是本发明的前置环境,基于网格类Excel的web表格设计器,在表单设计器中引入图表库,在模板内容中插入表格和图表;表格中单元格(Cell)是绑定数据函数的源头,也是图表数据统一接口的参数。
步骤2、扩展单元格引用自定义函数,规范自定义函数的标准。编写函数体描述类、函数执行类、回调函数类和返回对象类的抽象实例。
本步骤是对单元格中数据来源进行统一、标准化,具体涉及到自定义数据函数全过程对象内容,如图1所述。1、JS库中定义通用数据函数的抽象类(Function),默认是同步函数。抽象类统一了的属性(函数名、默认值)、运算体方法(根据参数集合执行)和结果对象(计算结果对象类)。2、定义异步函数抽象类(AsyncFuction),计算结果对象类是由异步函数通过URL和参数集发送Http Ajax请求或者Websocket至后端进行业务数据处理,处理结果完成,进行执行回调函数,将结果封装成结果对象(ReturnType)显示在单元格中。3、回调函数(CallbackFunction)是为了处理函数结果对象在单元格回填的过程和显示样式。4、结果对象(ReturnType)统一进行封装数据函数计算结果,其中返回结果如果是多个元素,数据会根据RowIndex和ColIndex集合进行横向或者纵向进行数据扩展,动态增加单元格数据。5、函数描述对象(Description)主要功能是为了在单元格内填写自定义函数时,用来提示函数的具体业务意义,和各个参数的代表的意思,给用户友好的录入体验。
步骤3、根据业务需求,后台服务端会提供多类业务数据处理方法,提供业务数据;前端Web页面会根据后台服务提供的业务方法,按上述步骤2编写Javascript自定义单元格函数体,按业务需求编写自定义业务函数实例,将所有封装好的业务函数实例全部初始化UI页面中,供用户填写录入。业务函数都是与后台服务进行数据传输得到的结果,全都定义为异步函数(AsyncFuction)。
步骤4、编写图表库加载数据的统一接口,抽象出图例项类和水平分类标签项,能够使得图表库中所有图表通过统一数据接口的实现(页面表单方式)完成数据加载,显示图形。
本步骤重点在针对不同类型图表,进行数据统一接口处理的设计。通过定义页面UI元素、页面操作流程发送统一格式的json数据到图表实例类中,完成数据加载,实现图表展示。
1、规范图表数据json统一格式:
{xAxis:{data:[...]},yAxis:[{data:[...],name:”},...]}
其中:xAxis表示水平(分类)标签信息,数据data可以是一个或者多个;yAxis表示图例项,每项由name和data组成,可以有多个不同名称图例项。
2、插入图表时,点击加载数据时会显示如图2所示,左侧图例项或者右侧水平分类项标签页面中增加和修改的页面,选择单元格对应数据为图表数据。点击保存会组织统一的json数据加载,实现图表数据展示。
步骤5、制定图表,WebSheet模板设计器设定表单静态信息、单元格内调用业务函数显示动态数据,插入图表,通过统一数据接口(页面表单操作方式)设定图例样式、指定图例项中的标题名称、图例项数据和水平轴标签相互对应的单元格数据集合,图表即可完成数据的异步加载,除图表数据外,还提供图表类型转换、图表样式选择(内置多种CSS风格)、图表布局(图例左中右低、网格显示等)、图例颜色选择(内置几组色调组合)等页面UI操作完成更加丰富、多样式的图表。
综合上述步骤,本发明采用对单元格数据来源进行自定义函数可视化填写,实现基于函数式异步数据交换;图表对单元格数据的引用和解析,能够快速实现各类图表的展示;解决了不同类型图表的数据接口不一样的问题、即可完成多类图表相互切换,从而简化各类图表制定过程,快速实现图表的一种方法。
Claims (1)
1.一种基于单元格函数快速实现图表的方法,其特征在于,包括以下步骤:
步骤1、在Web系统中嵌入采用HTML5 Canvas绘制的类似Excel功能的WebSheet页面,作为模板设计器,在模板设计器中引用Javascript图表库,在sheet表单中插入图表,图表包括折线图,柱状图,散点图,饼图、K线图、热力图,线图,关系图;
步骤2、打开WebSheet模板设计器,扩展单元格引用自定义函数,规范自定义函数的标准,编写函数体描述类、函数执行类、回调函数类和返回对象类的抽象实例;
步骤3、按业务需求编写自定义业务函数实例,业务函数是与后台服务进行数据传输得到的结果,全部定义为异步函数,通过步骤2对自定函数的抽象实例进行派生并重写具体内容,异步函数执行类是通过Http Ajax或者Websocket从系统后端拉/推数据,调用回调函数,将实例化返回对象类的具体内容;
步骤4、编写图表库加载数据的统一接口,抽象出图例项类和水平分类标签项,能够使得图表库中所有图表通过统一数据接口的实现完成数据加载,显示图形;
步骤5、制定图表,WebSheet模板设计器设定表单静态信息、单元格内调用业务函数显示动态数据,插入图表,通过统一数据接口设定图例样式、指定图例项中的标题名称、图例项数据和水平轴标签相互对应的单元格数据集合,图表即可完成数据的异步加载。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111229449.1A CN113988033B (zh) | 2021-10-21 | 2021-10-21 | 一种基于单元格函数快速实现图表的方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111229449.1A CN113988033B (zh) | 2021-10-21 | 2021-10-21 | 一种基于单元格函数快速实现图表的方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113988033A true CN113988033A (zh) | 2022-01-28 |
CN113988033B CN113988033B (zh) | 2024-02-23 |
Family
ID=79740086
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111229449.1A Active CN113988033B (zh) | 2021-10-21 | 2021-10-21 | 一种基于单元格函数快速实现图表的方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113988033B (zh) |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2017028611A1 (zh) * | 2015-08-18 | 2017-02-23 | 中兴通讯股份有限公司 | 一种表单实现方法及装置 |
US10311141B1 (en) * | 2015-09-21 | 2019-06-04 | Workday, Inc. | Data driven spreadsheet chart system |
CN111859053A (zh) * | 2020-07-22 | 2020-10-30 | 武汉镝次元数据科技有限公司 | 一种可视化图表的数据定义方法及其实现图表库 |
CN112434033A (zh) * | 2020-11-19 | 2021-03-02 | 中睿信数字技术有限公司 | 一种应对灵活多变的表格类数据收集和展示的方法 |
CN112882703A (zh) * | 2021-02-07 | 2021-06-01 | 湖北盈帆数据技术有限公司 | 一种自定义图表插件在线设计方法及装置 |
CN112926288A (zh) * | 2019-12-06 | 2021-06-08 | 北京阿博茨科技有限公司 | 一种商业智能数据可视化方法、系统、设备以及可读存储介质 |
-
2021
- 2021-10-21 CN CN202111229449.1A patent/CN113988033B/zh active Active
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2017028611A1 (zh) * | 2015-08-18 | 2017-02-23 | 中兴通讯股份有限公司 | 一种表单实现方法及装置 |
US10311141B1 (en) * | 2015-09-21 | 2019-06-04 | Workday, Inc. | Data driven spreadsheet chart system |
CN112926288A (zh) * | 2019-12-06 | 2021-06-08 | 北京阿博茨科技有限公司 | 一种商业智能数据可视化方法、系统、设备以及可读存储介质 |
CN111859053A (zh) * | 2020-07-22 | 2020-10-30 | 武汉镝次元数据科技有限公司 | 一种可视化图表的数据定义方法及其实现图表库 |
CN112434033A (zh) * | 2020-11-19 | 2021-03-02 | 中睿信数字技术有限公司 | 一种应对灵活多变的表格类数据收集和展示的方法 |
CN112882703A (zh) * | 2021-02-07 | 2021-06-01 | 湖北盈帆数据技术有限公司 | 一种自定义图表插件在线设计方法及装置 |
Non-Patent Citations (1)
Title |
---|
王丽华;: "录井柱状图绘制软件的开发", 录井工程, no. 02, 25 June 2011 (2011-06-25) * |
Also Published As
Publication number | Publication date |
---|---|
CN113988033B (zh) | 2024-02-23 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US5530864A (en) | Command object system for an object-oriented software platform | |
JP4972254B2 (ja) | リフレッシュ可能なWebクエリを作成するための統合された方法 | |
US5517606A (en) | Object-oriented menuing system using command objects of an object-oriented operation system | |
US5551055A (en) | System for providing locale dependent user interface for presenting control graphic which has different contents or same contents displayed in a predetermined order | |
US6424354B1 (en) | Object-oriented event notification system with listener registration of both interests and methods | |
US11822615B2 (en) | Contextual editing in a page rendering system | |
JP2001306308A (ja) | データ中心アプリケーションのクラス定義方法 | |
KR101951719B1 (ko) | 그래픽 인터페이스 기반으로 이벤트 동작을 프로그래밍 하는 웹 레포팅 디자인 시스템 | |
JPWO2006051905A1 (ja) | データ処理装置およびデータ処理方法 | |
KR20060101221A (ko) | 풍부한 데이터 바인딩된 애플리케이션 | |
JP2008508643A (ja) | マークアップ言語で記述された文書内にタグまたは属性を作成するための文書処理及び文書管理の手段と方法 | |
JP2004005568A (ja) | レガシー・アプリケーションの高速gui体裁更新 | |
US10169313B2 (en) | In-context editing of text for elements of a graphical user interface | |
JPH07200278A (ja) | 図形を用いたプログラミングシステム | |
US11677807B2 (en) | System and method to standardize and improve implementation efficiency of user interface content | |
JPWO2006046666A1 (ja) | 文書処理装置および文書処理方法 | |
Desolda et al. | End-user composition of interactive applications through actionable UI components | |
WO2006051904A1 (ja) | データ処理装置およびデータ処理方法 | |
Akiki | CHAIN: Developing model-driven contextual help for adaptive user interfaces | |
WO2006046668A1 (ja) | 文書処理装置および文書処理方法 | |
JPWO2006051721A1 (ja) | 文書処理装置及び文書処理方法 | |
US20240037325A1 (en) | Ability to add non-direct ancestor columns in child spreadsheets | |
JPWO2006046667A1 (ja) | 文書処理装置および文書処理方法 | |
CN113988033A (zh) | 一种基于单元格函数快速实现图表的方法 | |
Banavar et al. | Tooling and system support for authoring multi-device applications |
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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |