CN117234654A - 一种自定义图表颜色方法、装置、设备及存储介质 - Google Patents
一种自定义图表颜色方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN117234654A CN117234654A CN202311257888.2A CN202311257888A CN117234654A CN 117234654 A CN117234654 A CN 117234654A CN 202311257888 A CN202311257888 A CN 202311257888A CN 117234654 A CN117234654 A CN 117234654A
- Authority
- CN
- China
- Prior art keywords
- color
- function
- chart
- colors
- functions
- 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
- 239000003086 colorant Substances 0.000 title claims abstract description 92
- 238000000034 method Methods 0.000 title claims abstract description 60
- 230000006870 function Effects 0.000 claims abstract description 266
- 238000009877 rendering Methods 0.000 claims abstract description 16
- 238000004364 calculation method Methods 0.000 claims description 14
- 238000004422 calculation algorithm Methods 0.000 claims description 12
- 238000012545 processing Methods 0.000 description 27
- 238000013461 design Methods 0.000 description 17
- 238000004891 communication Methods 0.000 description 9
- 238000010586 diagram Methods 0.000 description 7
- 238000004590 computer program Methods 0.000 description 6
- 230000000694 effects Effects 0.000 description 6
- 238000005516 engineering process Methods 0.000 description 5
- 238000010295 mobile communication Methods 0.000 description 4
- 238000006243 chemical reaction Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 238000000802 evaporation-induced self-assembly Methods 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Landscapes
- Color Image Communication Systems (AREA)
Abstract
本申请提供一种自定义图表颜色方法、装置、设备及存储介质,涉及前端渲染技术领域。该方法包括:获取第一基准颜色的第一函数,以及第一目标颜色的第二函数,其中,函数用于三原色模式;根据第一函数和第二函数,得到第一颜色集合,其中,第一颜色集合中每种颜色的第三函数,均位于第一函数与第二函数之间;从第一颜色集合中确定图表颜色,并根据图表颜色渲染图表。本申请的方法,解决了前端中,只内置了几种图表颜色主题的代码,无法实现图表颜色的自由选择和切换的问题。
Description
技术领域
本申请涉及前端渲染领域,尤其涉及一种自定义图表颜色方法、装置、设备及存储介质。
背景技术
在前端中,需要展示大量的图表。前端中图表颜色的展示,是根据内置的图表颜色代码渲染的。
为了提高图表的可读性,需要频繁地修改图表颜色。通常情况下,前端中,只内置了几种图表颜色主题的代码,无法实现图表颜色的自由选择和切换。
发明内容
本申请提供一种自定义图表颜色方法、装置、设备及存储介质,用以解决前端中,只内置了几种图表颜色主题的代码,无法实现图表颜色的自由选择和切换的问题。
第一方面,本申请提供一种自定义图表颜色方法,该方法包括:
获取第一基准颜色的第一函数,以及第一目标颜色的第二函数,其中,函数用于三原色模式;
根据第一函数和第二函数,得到第一颜色集合,其中,第一颜色集合中每种颜色的第三函数,均位于第一函数与第二函数之间;
从第一颜色集合中确定图表颜色,并根据图表颜色渲染图表。
在一种可能的设计中,根据第一函数和第二函数,得到第一颜色集合,包括:
通过线性插值算法,对第一函数和第二函数进行线性插值计算,得到多个第三函数;
根据每个第三函数对应的颜色,得到第一颜色集合。
在一种可能的设计中,确定第一颜色集合中第i个第三函数(R3i,G3i,B3i)时,通过线性插值算法,对第一函数和第二函数进行线性插值计算,得到多个第三函数,具体包括:
(R3i,G3i,B3i)=(1-k)×(R1,G1,B1)+k×(R2,G2,B2)
k=0.01×i
其中,i为正整数,i的范围为(0,100],第i个第三函数为多个第三函数中的任意一个,k的范围为(0,1],(R1,G1,B1)为第一函数,(R2,G2,B2)为第二函数。
在一种可能的设计中,获取第一基准颜色的第一函数,以及第一目标颜色的第二函数,包括:
从颜色选择框获取第一基准颜色的第一色值,以及第一目标颜色的第二色值,其中,色值为十六进制编码;
根据第一基准颜色的第一色值,得到第一基准颜色的第一函数,并根据第一目标颜色的第二色值,得到第一目标颜色的第二函数。
在一种可能的设计中,从第一颜色集合中确定图表颜色,包括:
在第一颜色集合包括图表颜色时,从第一颜色集合中确定图表颜色。
在一种可能的设计中,在第一颜色集合不包括图表颜色时,从上传的图片中确定第二基准颜色和第二目标颜色,其中,图片包括图表颜色;
获取第二基准颜色的第四函数,以及第二目标颜色的第五函数;
根据第四函数和第五函数,得到第二颜色集合,其中,第二颜色集合中每种颜色的第六函数,均位于第四函数与第五函数之间;
从第二颜色集合中确定图表颜色。
在一种可能的设计中,在第一颜色集合不包括图表颜色时,从上传的图片中确定第二基准颜色和第二目标颜色,包括:
遍历图片的每个像素点,得到每个像素点的第七函数;
根据每个像素点的第七函数,得到每种第七函数的数量;
根据每种第七函数的数量,从多种第七函数中确定第四函数和第五函数,其中,第四函数的数量,大于多种第七函数中除第四函数之外的函数的数量,第五函数的数量,小于多种第七函数中除第五函数之外的函数的数量;
将第四函数作为第二基准颜色,并将第五函数作为第二目标颜色。
第二方面,本申请提供一种自定义图表颜色装置,包括:
函数第一获取模块,用于获取第一基准颜色的第一函数,以及第一目标颜色的第二函数,其中,函数用于三原色模式;
颜色集合第一确定模块,用于根据第一函数和第二函数,得到第一颜色集合,其中,第一颜色集合中每种颜色的第三函数,均位于第一函数与第二函数之间;
图表颜色第一确定模块,用于从第一颜色集合中确定图表颜色,并根据图表颜色渲染图表。
第三方面,本申请提供一种电子设备,包括:处理器,以及与处理器通信连接的存储器;
存储器存储计算机执行指令;
处理器执行存储器存储的计算机执行指令,用于实现第一方面发明内容的一种自定义图表颜色方法。
第四方面,本申请提供一种计算机可读存储介质,计算机可读存储介质中存储有计算机执行指令,计算机执行指令被处理器执行时,用于实现第一方面发明内容的一种自定义图表颜色方法。
第五方面,本申请提供一种计算机程序产品,包括计算机程序,计算机程序被处理器执行时,用于实现第一方面发明内容的一种自定义图表颜色方法。
本申请提供的一种自定义图表颜色方法、装置、设备及存储介质,获取第一基准颜色的第一函数,以及第一目标颜色的第二函数;根据第一函数和第二函数,得到第一颜色集合;从第一颜色集合中确定图表颜色,并根据图表颜色渲染图表。实现了如下技术效果:通过演示人员选择的第一基准颜色和第一目标颜色,得到第一颜色集合,并通过演示人员从第一颜色集合中选择的图表颜色渲染图表,解决了前端中,只内置了几种图表颜色主题的代码,无法实现图表颜色的自由选择和切换的问题;通过图表颜色插件、中央处理单元和图形处理单元渲染图表,解决了服务器主机需要从后台服务器获取内置了图像颜色主题的代码,导致修改图表颜色流程繁琐的问题;通过从第一颜色集合中确定图表颜色,实现了图表的图表颜色的灵活选择和自由搭配,提高了图表的可读性。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的自定义图表颜色的系统架构示意图;
图2为本申请实施例提供的自定义图表颜色方法的流程示意图一;
图3为本申请实施例提供的自定义图表颜色方法的流程示意图二;
图4为本申请实施例提供的自定义图表颜色方法的流程示意图三;
图5为本申请实施例提供的自定义图表颜色装置的结构示意图;
图6为本申请实施例提供的电子设备硬件的结构示意图。
附图标记:
110-服务器主机;111-图表颜色插件;112-中央处理单元;113-图形处理单元;120-显示屏幕;200-自定义图表颜色装置;210-函数第一获取模块;220-颜色集合第一确定模块;230-图表颜色第一确定模块;300-电子设备;310-处理器;320-存储器;330-通信部件;340-总线。
具体实施方式
这里将详细地对示例性实施例进行说明,其示下面例表示在附图中。的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
在本申请的实施例中,采用了“第一”、“第二”等字样对功能和作用基本相同的相同项或相似项进行区分。本领域技术人员可以理解“第一”、“第二”等字样并不对数量和执行次序进行限定,并且“第一”、“第二”等字样也并不限定一定不同。需要说明的是,本申请实施例中,“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其他实施例或设计方案更优选或更具优势。确切而言,使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。本申请实施例中,“至少一个”是指一个或者多个,“多个”是指两个或两个以上。
需要说明的是,本申请实施例中的“在……时”,可以为在某种情况发生的瞬时,也可以为在某种情况发生后的一段时间内,本申请实施例对此不作具体限定。此外,本申请实施例提供的一种自定义图表颜色方法仅作为示例,自定义图表颜色方法还可以包括更多或更少的内容。
为了便于清楚描述本申请实施例的技术方案,以下,对本申请实施例中所涉及的部分术语和技术进行简单介绍:
三原色(Red Green Blue,RGB)模式:RGB模式是指将红色、绿色和蓝色三种颜色,按不同的比例混合而成的一种光的颜色模式。
颜色的函数:是指RGB模式中描述颜色的函数。函数的语法为(Red,Green,Blue),其中,Red表示颜色中红色的成分,数值范围为[0,255];Green表示颜色中绿色的成分,数值范围为[0,255];Blue表示颜色中蓝色的成分,数值范围为[0,255]。
颜色集合:是指多种颜色的集合。
线性插值算法:是指插值函数为一次多项式的插值算法。线性插值算法在各插值节点上插值的误差为0。
十六进制编码(Hexadecimal,HEX):是指一种逢16进1的进位制。
颜色的色值:是指通过十六进制编码描述颜色的编码。色值的格式为:以‘#’开头的6位十六进制数值。6位数值分为3组,每组2位,依次表示红、绿和蓝三种颜色的强度。
在前端中,需要展示大量的图表。前端中图表颜色的展示,是根据内置的图表颜色代码渲染的。例如,在浏览器中,页面的渲染过程为:首先,浏览器解析超文本标记语言(HyperText Markup Language,HTML)代码,创建文档对象模型(Document Object Model,DOM)树,其中,HTML代码中包括页面主题的代码;其次,浏览器解析层叠样式表(CascadingStyle Sheets,CSS)代码,创建层叠样式表对象模型(Cascading Style Sheets ObjectModel,CSSOM)树;再次,根据DOM树和CSSOM树,得到渲染(Rendering)树;再次,根据渲染树,确定网页中的多个节点,每个节点的CSS定义,以及每个节点在屏幕中的位置;最后,按照预设的规则,通过图形处理单元(Graphics Processing Unit,GPU)渲染页面。
在演示过程中,需要频繁地修改图表颜色,以提高图表的可读性。通常情况下,前端中,只内置了几种图表颜色主题的代码,图表颜色也只能在这几种图表颜色主题中选择和切换。而修改图表颜色,需要经历代码修改、打包和部署等繁琐的流程,极大地降低了图表颜色的修改效率。
针对以上的技术问题,发明人提出一种让演示人员在前端自定义图表颜色,来自由搭配图表的方法。
基于此,本申请实施例提供一种自定义图表颜色方法、装置、设备及存储介质,可用于前端渲染技术领域,旨在解决前端中,只内置了几种图表颜色主题的代码,无法实现图表颜色的自由选择和切换的问题。
图1为本申请实施例提供的自定义图表颜色的系统架构示意图。需要注意的是,图1所示仅为可以应用本申请实施例的系统架构的示例,以帮助本领域技术人员理解本申请的技术内容,但并不意味着本申请实施例不可以用于其他设备、系统、环境或场景。
如图1所示,自定义图表颜色的系统架构包括:服务器主机110和显示屏幕120,服务器主机110与显示屏幕120通信连接,通信连接可以是有线通信连接或无线通信连接,有线通信连接的连接方式可以是高清多媒体接口(High Definition MultimediaInterface,HDMI)、通用串行总线(Universal Serial Bus,USB)或双绞线(Twisted Pair,TP)等,无线通信连接的连接方式可以是第四代移动通信技术(The 4th GenerationMobile Communication Technology,4G)、第五代移动通信技术(The 5th GenerationMobile Communication Technology,5G)或无线保真(WIreless Fidelity,WiFi)。
服务器主机110可以是各种类型的服务器,类型包括但不限于:智能手机、笔记本电脑、台式计算机和数据中心等。服务器主机110部署于本地,与部署于网络的后台服务器进行数据交互。服务器主机110用于从后台服务器获取内置了图表颜色主题的代码,并根据上述代码,通过GPU渲染图表;还用于根据基准颜色和目标颜色得到颜色集合,并根据颜色集合中的图表颜色,通过GPU渲染图表。
服务器主机110中部署有图表颜色插件111、中央处理单元112(CentralProcessing Unit,CPU)和图形处理单元113。图表颜色插件111、中央处理单元112和图形处理单元113彼此通信连接。图表颜色插件111可以是软件,也可以是硬件,还可以是软件和硬件的结合。中央处理单元112是一种芯片(Die),不同的服务器主机110中部署不同的中央处理单元112,例如,当服务器主机110为智能手机时,中央处理单元112为移动CPU;当服务器主机110为笔记本电脑或台式计算机时,中央处理单元112为桌面CPU;当服务器主机110为数据中心时,中央处理单元112为服务器CPU。图形处理单元113可以是独立GPU,也可以是集成GPU。独立GPU一般封装在独立的显卡电路上,并拥有独立显存;集成GPU和CPU共用一个Die,并共享系统内存。
演示人员通过图表颜色插件111选择基准颜色和目标颜色,图表颜色插件111通过中央处理单元112,根据基准颜色和目标颜色,得到颜色集合;之后,演示人员通过图表颜色插件111从颜色集合中选择图表颜色,图表颜色插件111通过图形处理单元113渲染图表。
显示屏幕120可以是各种类型的显示器,类型包括但不限于:映象管显示器(Cathode Ray Tube,CRT)、液晶显示器(Liquid Crystal Display,LCD)和等离子体显示器(Plasma Display Panel,PDP)等。显示屏幕120用于显示渲染后的图表;还用于显示颜色选择框,以便于演示人员从颜色选择框中选择基准颜色和目标颜色。
图2为本申请实施例提供的自定义图表颜色方法的流程示意图一。如图2所示,该方法包括:
S101、获取第一基准颜色的第一函数,以及第一目标颜色的第二函数;
具体来说,演示人员通过图表颜色插件,选择第一基准颜色和第一目标颜色。图表颜色插件获取演示人员选择的第一基准颜色和第一目标颜色,并获取第一基准颜色的第一函数,以及第一目标颜色的第二函数,其中,函数用于三原色模式。
S102、根据第一函数和第二函数,得到第一颜色集合;
具体来说,图表颜色插件通过CPU,根据第一函数和第二函数,得到第一颜色集合。第一颜色集合是多种颜色的集合,第一颜色集合中每种颜色的第三函数,均位于第一函数与第二函数之间,即第三函数中任意一种颜色的成分,均不大于第一函数中对应的颜色的成分,并不小于第二函数中对应的颜色的成分;或者,第三函数中任意一种颜色的成分,均不小于第一函数中对应的颜色的成分,并不大于第二函数中对应的颜色的成分。
S103、从第一颜色集合中确定图表颜色,并根据图表颜色渲染图表;
具体来说,演示人员通过图表颜色插件,从第一颜色集合中选择图表颜色。图表颜色插件获取演示人员选择的图表颜色,并通过GPU,根据图表颜色渲染图表。演示人员可以灵活选择图表颜色,以获取视觉效果更佳的图表颜色的搭配,提高图表的可读性。
图表颜色插件通过GPU,根据图表颜色渲染图表的方案,可以是图表颜色插件根据图表颜色,确定图表的多个节点,每个节点的CSS定义,以及每个节点在屏幕中的位置,并按照预设的规则,通过GPU渲染图表;也可以是图表颜色插件根据图表颜色,生成对应的HTML代码或者渲染树,从而确定上述方案中的每个节点的CSS定义和位置,进而按照预设的规则,通过GPU渲染图表;还可以是未指出的现有技术中的其他方案。
图表颜色插件根据图表颜色渲染图表,是指渲染图表的背景颜色、边框颜色和字体颜色等类型中的一个或多个。任意一个类型的每个区域,可以同时渲染为一种图表颜色,也可以同时渲染为多种图表颜色组成的渐变色,还可以分别渲染为多种图表颜色。
在其他实施例中,图表颜色插件通过CPU,根据图表颜色渲染图表。
本实施例提供的一种自定义图表颜色方法,获取第一基准颜色的第一函数,以及第一目标颜色的第二函数;根据第一函数和第二函数,得到第一颜色集合;从第一颜色集合中确定图表颜色,并根据图表颜色渲染图表。实现了如下技术效果:通过演示人员选择的第一基准颜色和第一目标颜色,得到第一颜色集合,并通过演示人员从第一颜色集合中选择的图表颜色渲染图表,解决了前端中,只内置了几种图表颜色主题的代码,无法实现图表颜色的自由选择和切换的问题;通过图表颜色插件、中央处理单元和图形处理单元渲染图表,解决了服务器主机需要从后台服务器获取内置了图像颜色主题的代码,导致修改图表颜色流程繁琐的问题;通过从第一颜色集合中确定图表颜色,实现了图表的图表颜色的灵活选择和自由搭配,提高了图表的可读性。
图3为本申请实施例提供的自定义图表颜色方法的流程示意图二。如图3所示,本实施例在图2实施例的基础上,对自定义图表颜色方法进行详细说明,本实施例提供的一种自定义图表颜色方法,包括:
S201、从颜色选择框获取第一基准颜色的第一色值,以及第一目标颜色的第二色值;
具体来说,演示人员通过图表颜色插件,从颜色选择框中选择第一基准颜色和第一目标颜色,其中,颜色选择框可以内置于图表颜色插件,也可以不内置于图表颜色插件。图表颜色插件从颜色选择框获取第一基准颜色的第一色值HEX1,以及第一目标颜色的第二色值HEX2,其中,色值为十六进制编码HEX。
颜色选择框位于显示屏幕上,颜色选择框的类型可以是颜色面板、色板或取色器等。当颜色选择框为颜色面板时,演示人员输入RGB值或者拖动RGB滑块,选择第一目标颜色和第一目标颜色;当颜色选择框为色板时,演示人员从多个直观的颜色中,选择第一目标颜色和第一目标颜色;当颜色选择框为取色器时,演示人员在显示屏幕上拾取颜色,作为第一目标颜色或第一目标颜色。
S202、根据第一基准颜色的第一色值,得到第一基准颜色的第一函数,并根据第一目标颜色的第二色值,得到第一目标颜色的第二函数;
具体来说,第一色值HEX1和第二色值HEX2的格式为#FFFFFF,HEX的取值范围为0-9,以及A-F;第一函数RGB1和第二函数RGB2的格式为(R,G,B),RGB的取值范围为0-255。
图表颜色插件根据RGB-HEX对照表,将第一色值HEX1转换为第一函数RGB1,并将第二色值HEX2转换为第二函数RGB2。
S203、通过线性插值算法,对第一函数和第二函数进行线性插值计算,得到多个第三函数;
具体来说,图表颜色插件通过线性插值算法,对第一函数RGB1和第二函数RGB2进行线性插值计算,得到多个第三函数RGB3组成的第一颜色集
在一种可能的设计中,确定第一颜色集合中第i个第三函数(R3i,G3i,B3i)时,计算公式为:
(R3i,G3i,B3i)=(1-k)×(R1,G1,B1)+k×(R2,G2,B2)
k=0.01×i
其中,i为正整数,i的范围为(0,100],第i个第三函数为多个第三函数中的任意一个,k的范围为(0,1],(R1,G1,B1)为第一函数,(R2,G2,B2)为第二函数。
S204、根据每个第三函数对应的颜色,得到第一颜色集合;
具体来说,图表颜色插件显示每个第三函数对应的颜色,得到第一颜色集合。图表颜色插件将第一颜色集合显示在显示屏幕上,第一颜色集合的表现形式可以是颜色面板、色板或取色器等。
需要注意的是,RGB3i的取值可能包括小数,图表颜色插件将RGB3i向下取整后,显示向下取整后的RGB3i对应的颜色;同时,在RGB1和RGB2的取值接近时,相邻两个向下取整后的RGB3i可能相同,图表颜色插件合并这两个向下取整后的RGB3i对应的颜色。显示的第一颜色集合中,最多包括一百个第三函数对应的颜色。
例如,演示人员选择的第一基准颜色对应的RGB1为(0,150,255),选择的第一目标颜色对应的RGB2为(90,210,194)。
在i=30时,第三函数(R330,G330,B330)的计算公式为:
(R330,G330,B330)
=(1-0.3)×(0,150,255)+0.3×(90,210,194)
=(27,168,236.7)
向下取整后的(R330,G330,B330)=(27,168,236);
在i=31时,第三函数(R331,G331,B331)的计算公式为:
(R331,G331,B331)
=(1-0.31)×(0,150,255)+0.31×(90,210,194)
=(27.9,168.6,236.09)
向下取整后的(R331,G331,B331)=(27,168,236);
图表颜色插件在第一颜色集合中,合并向下取整后的(R330,G330,B330)和(R331,G331,B331)对应的颜色。
执行完S204之后,演示人员从第一颜色集合中选择图表颜色。在演示人员选择出图表颜色时,图表颜色插件确定第一颜色集合包括图表颜色之,则执行S205;在演示人员没有选择出图表颜色时,图表颜色插件确定第一颜色集合不包括图表颜色,则执行S206。
S205、在第一颜色集合包括图表颜色时,从第一颜色集合中确定图表颜色;
S205与S103类似,本实施例中不再赘述。
S206、在第一颜色集合不包括图表颜色时,从上传的图片中确定第二基准颜色和第二目标颜色;
具体来说,演示人员根据图表选择图片,并将图片上传至图表颜色插件,其中,该图片包括图表颜色。图表颜色插件根据特定的算法,从上传的图片中确定第二基准颜色和第二目标颜色。
S207、获取第二基准颜色的第四函数,以及第二目标颜色的第五函数;
S208、根据第四函数和第五函数,得到第二颜色集合;
S209、从第二颜色集合中确定图表颜色;
S207-S209与S101-103类似,本实施例中不再赘述。需要注意的是,第二颜色集合中每种颜色的第六函数,均位于第四函数与第五函数之间。
图4为本申请实施例提供的自定义图表颜色方法的流程示意图三。在一种可能的设计中,如图4所示,本实施例在图3实施例的基础上,对S206进行详细说明,S206、在第一颜色集合不包括图表颜色时,从上传的图片中确定第二基准颜色和第二目标颜色,包括:
S2061、遍历图片的每个像素点,得到每个像素点的第七函数;
具体来说,图表颜色插件通过HTML5中的文件应用程序编程接口(FileApplication Programming Interface,File API),将图片转换为基于64个可打印字符来表示二进制数据(Base64)的数据。之后,将Base64的数据绘制到画布(Canvas)上,获取像素数据,遍历每个像素点,并计算每个像素点的第七函数RGB7。
在其他实施例中,图表颜色插件通过现有技术中的其他工具和方法,遍历图片的每个像素点。
S2062、根据每个像素点的第七函数,得到每种第七函数的数量;
具体来说,图表颜色插件确定多个RGB7中,每种RGB7的数量,其中,每种RGB7的取值彼此相同,对应的颜色也彼此相同。确定的结果为,第m种RGB7的数量为Nm,其中,m为正整数,第m种RGB7为多种RGB7中的任意一种。
在其他实施例中,图表颜色插件将每个RGB7转换为字符串,并确定每种字符串的数量。
S2063、根据每种第七函数的数量,从多种第七函数中确定第四函数和第五函数;
具体来说,图表颜色插件根据每种RGB7的数量,从多种RGB7中确定第四函数RGB4和第五函数RGB5,其中,RGB4的数量,大于多种RGB7中除RGB4之外的函数的数量;RGB5的数量,小于多种RGB7中除RGB5之外的函数的数量。
图表颜色插件通过上传的图片生成第二颜色集合,以使演示人员灵活选择和自由搭配图表的图表颜色,提高了图表的可读性。
S2064、将第四函数作为第二基准颜色,并将第五函数作为第二目标颜色。
本实施例提供的一种自定义图表颜色方法,获取第一基准颜色的第一函数,以及第一目标颜色的第二函数;根据第一函数和第二函数,得到第一颜色集合;从第一颜色集合中确定图表颜色,并根据图表颜色渲染图表。实现了如下技术效果:通过演示人员选择的第一基准颜色和第一目标颜色,得到第一颜色集合,并通过演示人员从第一颜色集合中选择的图表颜色渲染图表,解决了前端中,只内置了几种图表颜色主题的代码,无法实现图表颜色的自由选择和切换的问题;通过图表颜色插件、中央处理单元和图形处理单元渲染图表,解决了服务器主机需要从后台服务器获取内置了图像颜色主题的代码,导致修改图表颜色流程繁琐的问题;通过从第一颜色集合中确定图表颜色,实现了图表的图表颜色的灵活选择和自由搭配,提高了图表的可读性;通过颜色选择框得到第一颜色集合,或者通过上传的图片得到第二颜色集合,以便于演示人员从第一颜色集合或第二颜色集合中选择图表颜色,解决了图表颜色确定的问题;通过前端技术的File API和Canvas,得到每个像素点的第七函数,解决了数据处理需要与后台服务器进行数据交互的问题。
本发明实施例可以根据上述方法示例对电子设备或主控设备进行功能模块的划分,例如,可以对应各个功能划分各个功能模块,也可以将两个或两个以上的功能集成在一个处理单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能模块的形式实现。需要说明的是,本发明实施例中对模块的划分是示意性的,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式。
图5为本申请实施例提供的自定义图表颜色装置的结构示意图。如图5所示,本申请实施例提供的自定义图表颜色装置200,包括:函数第一获取模块210、颜色集合第一确定模块220和图表颜色第一确定模块230;
函数第一获取模块210,用于获取第一基准颜色的第一函数,以及第一目标颜色的第二函数,其中,函数用于三原色模式;
颜色集合第一确定模块220,用于根据第一函数和第二函数,得到第一颜色集合,其中,第一颜色集合中每种颜色的第三函数,均位于第一函数与第二函数之间;
图表颜色第一确定模块230,用于从第一颜色集合中确定图表颜色,并根据图表颜色渲染图表。
在一种可能的设计中,颜色集合第一确定模块220,包括:线性插值计算模块和颜色集合第二确定模块;
线性插值计算模块,用于通过线性插值算法,对第一函数和第二函数进行线性插值计算,得到多个第三函数;
颜色集合第二确定模块,用于根据每个第三函数对应的颜色,得到第一颜色集合。
在一种可能的设计中,确定第一颜色集合中第i个第三函数(R3i,G3i,B3i)时,线性插值计算模块,具体用于计算:
(R3i,G3i,B3i)=(1-k)×(R1,G1,B1)+k×(R2,G2,B2)
k=0.01×i
其中,i为正整数,i的范围为(0,100],第i个第三函数为多个第三函数中的任意一个,k的范围为(0,1],(R1,G1,B1)为第一函数,(R2,G2,B2)为第二函数。
在一种可能的设计中,函数第一获取模块210,包括:色值获取模块和函数第二获取模块;
色值获取模块,用于从颜色选择框获取第一基准颜色的第一色值,以及第一目标颜色的第二色值,其中,色值为十六进制编码;
函数第二获取模块,用于根据第一基准颜色的第一色值,得到第一基准颜色的第一函数,并根据第一目标颜色的第二色值,得到第一目标颜色的第二函数。
在一种可能的设计中,图表颜色第一确定模块230,用于在第一颜色集合包括图表颜色时,从第一颜色集合中确定图表颜色。
在一种可能的设计中,自定义图表颜色装置200,还包括:图表颜色第二确定模块、函数第三获取模块、颜色集合第三确定模块和图表颜色第三确定模块;
图表颜色第二确定模块,用于在第一颜色集合不包括图表颜色时,从上传的图片中确定第二基准颜色和第二目标颜色,其中,图片包括图表颜色;
函数第三获取模块,用于获取第二基准颜色的第四函数,以及第二目标颜色的第五函数;
颜色集合第三确定模块,用于根据第四函数和第五函数,得到第二颜色集合,其中,第二颜色集合中每种颜色的第六函数,均位于第四函数与第五函数之间;
图表颜色第三确定模块,用于从第二颜色集合中确定图表颜色。
在一种可能的设计中,图表颜色第二确定模块,包括:像素点遍历模块、函数第四确定模块、函数第五确定模块和图表颜色第四确定模块;
像素点遍历模块,用于遍历图片的每个像素点,得到每个像素点的第七函数;
函数第四确定模块,用于根据每个像素点的第七函数,得到每种第七函数的数量;
函数第五确定模块,用于根据每种第七函数的数量,从多种第七函数中确定第四函数和第五函数,其中,第四函数的数量,大于多种第七函数中除第四函数之外的函数的数量,第五函数的数量,小于多种第七函数中除第五函数之外的函数的数量;
图表颜色第四确定模块,用于将第四函数作为第二基准颜色,并将第五函数作为第二目标颜色。
本实施例提供的一种自定义图表颜色装置,可执行上述实施例的一种自定义图表颜色方法,其实现原理和技术效果类似,本实施例此处不再赘述。
在前述的一种自定义图表颜色方法的具体实现中,各模块可以被实现为处理器,处理器可以执行存储器中存储的计算机执行指令,使得处理器执行上述一种自定义图表颜色方法。
图6为本申请实施例提供的电子设备硬件的结构示意图。如图6所示,该电子设备300包括:至少一个处理器310和存储器320。该电子设备300还包括通信部件330。其中,处理器310、存储器320以及通信部件330通过总线340连接。
在具体实现过程中,至少一个处理器310执行存储器320存储的计算机执行指令,使得至少一个处理器310执行如上电子设备侧所执行的一种自定义图表颜色方法。
处理器310的具体实现过程可参见上述方法实施例,其实现原理和技术效果类似,本实施例此处不再赘述。
在上述实施例中,应理解,处理器可以是中央处理单元(英文:CentralProcessing Unit,简称:CPU),还可以是其他通用处理器、数字信号处理器(英文:DigitalSignal Processor,简称:DSP)、专用集成电路(英文:Application Specific IntegratedCircuit,简称:ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合发明所公开的方法的步骤可以直接体现为硬件处理器执行完成,或者用处理器中的硬件及软件模块组合执行完成。
存储器可能包含高速RAM存储器,也可能还包括非易失性存储NVM,例如至少一个磁盘存储器。
总线可以是工业标准体系结构(Industry Standard Architecture,ISA)总线、外部设备互连(Peripheral Component,PCI)总线或扩展工业标准体系结构(ExtendedIndustry Standard Architecture,EISA)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示,本申请附图中的总线并不限定仅有一根总线或一种类型的总线。
上述针对电子设备以及主控设备所实现的功能,对本发明实施例提供的方案进行了介绍。可以理解的是,电子设备或主控设备为了实现上述功能,其包含了执行各个功能相应的硬件结构和/或软件模块。结合本发明实施例中所公开的实施例描述的各示例的单元及算法步骤,本发明实施例能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行,取决于技术方案的特定应用和设计约束条件。本领域技术人员可以对每个特定的应用来使用不同的方法来实现所描述的功能,但是这种实现不应认为超出本发明实施例的技术方案的范围。
本申请还提供一种计算机可读存储介质,计算机可读存储介质中存储有计算机执行指令,当处理器执行计算机执行指令时,用于实现如上一种自定义图表颜色方法。
上述可读存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现,如静态随机存取存储器(SRAM),电可擦除可编程只读存储器(EEPROM),可擦除可编程只读存储器(EPROM),可编程只读存储器(PROM),只读存储器(ROM),磁存储器,快闪存储器,磁盘或光盘。可读存储介质可以是通用或专用计算机能够存取的任何可用介质。
一种示例性的可读存储介质耦合至处理器,从而使处理器能够从该可读存储介质读取信息,且可向该可读存储介质写入信息。当然,可读存储介质也可以是处理器的组成部分。处理器和可读存储介质可以位于专用集成电路(Application Specific IntegratedCircuits,简称:ASIC)中。当然,处理器和可读存储介质也可以作为分立组件存在于电子设备或主控设备中。
本申请还提供了一种计算机程序产品,计算机程序产品包括:计算机程序,计算机程序存储在可读存储介质中,电子设备的至少一个处理器可以从可读存储介质读取计算机程序,至少一个处理器执行计算机程序使得电子设备执行上述任一实施例提供的方案。
本领域普通技术人员可以理解:实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时,执行包括上述方法实施例的步骤;而前述的存储介质包括:ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
至此,已经结合附图所示的优选实施方式描述了本申请的技术方案,但是,本领域技术人员容易理解的是,本申请的保护范围显然不局限于这些具体实施方式,以上各实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述各实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。
Claims (10)
1.一种自定义图表颜色方法,其特征在于,所述方法包括:
获取第一基准颜色的第一函数,以及第一目标颜色的第二函数,其中,所述函数用于三原色模式;
根据所述第一函数和所述第二函数,得到第一颜色集合,其中,所述第一颜色集合中每种颜色的第三函数,均位于所述第一函数与所述第二函数之间;
从所述第一颜色集合中确定图表颜色,并根据所述图表颜色渲染图表。
2.根据权利要求1所述的方法,其特征在于,所述根据所述第一函数和所述第二函数,得到第一颜色集合,包括:
通过线性插值算法,对所述第一函数和所述第二函数进行线性插值计算,得到多个第三函数;
根据每个第三函数对应的颜色,得到所述第一颜色集合。
3.根据权利要求2所述的方法,其特征在于,确定所述第一颜色集合中第i个第三函数(R3i,G3i,B3i)时,所述通过线性插值算法,对所述第一函数和所述第二函数进行线性插值计算,得到多个第三函数,具体包括:
(R3i,G3i,B3i)=(1-k)×(R1,G1,B1)+k×(R2,G2,B2)
k=0.01×i
其中,所述i为正整数,所述i的范围为(0,100],所述第i个第三函数为所述多个第三函数中的任意一个,所述k的范围为(0,1],所述(R1,G1,B1)为第一函数,所述(R2,G2,B2)为第二函数。
4.根据权利要求3所述的方法,其特征在于,所述获取第一基准颜色的第一函数,以及第一目标颜色的第二函数,包括:
从颜色选择框获取所述第一基准颜色的第一色值,以及所述第一目标颜色的第二色值,其中,所述色值为十六进制编码;
根据所述第一基准颜色的第一色值,得到所述第一基准颜色的第一函数,并根据所述第一目标颜色的第二色值,得到所述第一目标颜色的第二函数。
5.根据权利要求1-4任一项所述的方法,其特征在于,所述从所述第一颜色集合中确定图表颜色,包括:
在所述第一颜色集合包括所述图表颜色时,从所述第一颜色集合中确定所述图表颜色。
6.根据权利要求5所述的方法,其特征在于,在所述第一颜色集合不包括所述图表颜色时,从上传的图片中确定第二基准颜色和第二目标颜色,其中,所述图片包括所述图表颜色;
获取所述第二基准颜色的第四函数,以及所述第二目标颜色的第五函数;
根据所述第四函数和所述第五函数,得到第二颜色集合,其中,所述第二颜色集合中每种颜色的第六函数,均位于所述第四函数与所述第五函数之间;
从所述第二颜色集合中确定所述图表颜色。
7.根据权利要求6所述的方法,其特征在于,所述在所述第一颜色集合不包括所述图表颜色时,从上传的图片中确定第二基准颜色和第二目标颜色,包括:
遍历所述图片的每个像素点,得到所述每个像素点的第七函数;
根据所述每个像素点的第七函数,得到每种第七函数的数量;
根据所述每种第七函数的数量,从多种第七函数中确定所述第四函数和所述第五函数,其中,所述第四函数的数量,大于所述多种第七函数中除所述第四函数之外的函数的数量,所述第五函数的数量,小于所述多种第七函数中除所述第五函数之外的函数的数量;
将所述第四函数作为所述第二基准颜色,并将所述第五函数作为所述第二目标颜色。
8.一种自定义图表颜色装置,其特征在于,所述装置包括:
函数第一获取模块,用于获取第一基准颜色的第一函数,以及第一目标颜色的第二函数,其中,所述函数用于三原色模式;
颜色集合第一确定模块,用于根据所述第一函数和所述第二函数,得到第一颜色集合,其中,所述第一颜色集合中每种颜色的第三函数,均位于所述第一函数与所述第二函数之间;
图表颜色第一确定模块,用于从所述第一颜色集合中确定图表颜色,并根据所述图表颜色渲染图表。
9.一种电子设备,其特征在于,包括:处理器,以及与所述处理器通信连接的存储器;
所述存储器存储计算机执行指令;
所述处理器执行所述存储器存储的计算机执行指令,用于实现如权利要求1至7任一项所述的一种自定义图表颜色方法。
10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质中存储有计算机执行指令,所述计算机执行指令被处理器执行时,用于实现如权利要求1至7任一项所述的一种自定义图表颜色方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311257888.2A CN117234654A (zh) | 2023-09-26 | 2023-09-26 | 一种自定义图表颜色方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311257888.2A CN117234654A (zh) | 2023-09-26 | 2023-09-26 | 一种自定义图表颜色方法、装置、设备及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN117234654A true CN117234654A (zh) | 2023-12-15 |
Family
ID=89087669
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202311257888.2A Pending CN117234654A (zh) | 2023-09-26 | 2023-09-26 | 一种自定义图表颜色方法、装置、设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN117234654A (zh) |
-
2023
- 2023-09-26 CN CN202311257888.2A patent/CN117234654A/zh active Pending
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN107066430B (zh) | 图片处理方法、装置、服务端及客户端 | |
CN111915705B (zh) | 图片可视化编辑方法、装置、设备和介质 | |
JPH0469794B2 (zh) | ||
CN111476852B (zh) | 阅读器刷新方法、计算设备及计算机存储介质 | |
CN111460342B (zh) | 页面的渲染展示方法、装置、电子设备及计算机存储介质 | |
JP2009540359A (ja) | リモートサブピクセル解像度の特性 | |
CN114527980A (zh) | 一种显示渲染方法、装置、电子设备和可读存储介质 | |
CN110996026B (zh) | 一种osd显示方法、装置、设备及存储介质 | |
CN114119778A (zh) | 用户界面的深色模式生成方法、电子设备及存储介质 | |
CN117234654A (zh) | 一种自定义图表颜色方法、装置、设备及存储介质 | |
US6967689B1 (en) | System and method for providing a variable character size in an on-screen display application | |
CN110992242A (zh) | 一种消除透明图片水波纹的方法和装置 | |
US20110221775A1 (en) | Method for transforming displaying images | |
CN114786067B (zh) | 一种基于弹幕的互动方法、装置、设备以及存储介质 | |
CN113038184B (zh) | 数据处理方法、装置、设备及存储介质 | |
CN106709965B (zh) | 一种基于共享表面的文本显示方法及装置 | |
CN116010736A (zh) | 矢量图标的处理方法、装置、设备以及存储介质 | |
CN115391692A (zh) | 视频处理方法和装置 | |
US20130063475A1 (en) | System and method for text rendering | |
JP3910204B2 (ja) | 画像発生装置及び画像表示装置並びに画像発生方法及び画像表示方法 | |
CN110187881B (zh) | 一种异形窗口创建方法、系统、装置及计算机存储介质 | |
EP2761396A1 (en) | Displaying hardware accelerated video on x window systems | |
CN111401165A (zh) | 台标的萃取方法、显示装置以及计算机可读存储介质 | |
CN110609669A (zh) | 界面处理方法、装置、存储介质及电子设备 | |
JP7496247B2 (ja) | 画像描画処理装置、画像描画処理方法及び画像描画処理プログラム並びに電子ゲーム提供装置 |
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 |