CN106610926A - Echarts图表的数据显示方法及装置 - Google Patents
Echarts图表的数据显示方法及装置 Download PDFInfo
- Publication number
- CN106610926A CN106610926A CN201510710882.5A CN201510710882A CN106610926A CN 106610926 A CN106610926 A CN 106610926A CN 201510710882 A CN201510710882 A CN 201510710882A CN 106610926 A CN106610926 A CN 106610926A
- Authority
- CN
- China
- Prior art keywords
- data
- canvas
- target
- width
- longitudinal axis
- 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
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/174—Form filling; Merging
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Control Of Indicators Other Than Cathode Ray Tubes (AREA)
Abstract
本申请公开了一种Echarts图表的数据显示方法及装置。该方法包括:获取待显示数据,其中,待显示数据为需要在Echarts图表上进行显示的数据;在待显示数据中获取字符长度最长的数据,得到目标数据;创建canvas画布并在canvas画布上绘制目标数据;计算目标宽度,其中,目标宽度为目标数据在canvas画布上所占据的宽度;以及根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据。通过本申请,解决了相关技术中当Echarts图表中数据长度过长时,容易导致数据显示不完整的问题。
Description
技术领域
本申请涉及图表领域,具体而言,涉及一种Echarts图表的数据显示方法及装置。
背景技术
商业级数据图表(Enterprise Charts,简称ECharts),是一款基于HTML5 Canvas的企业级图表库,在使用Echarts图表的过程中,经常会使用包含坐标轴的图表来展示二维数据,如折线图、柱状图等。在展示过程中坐标轴纵(横)轴左(下)侧会显示每个刻度所标示的数据度(即,label),为了能够正确显示label,在初始化图表时通常会给坐标轴设定一定的宽度来实现。然而,在相关技术中,初始化Echarts图表时,通常设定坐标轴纵轴的边距为一个具体的数字,例如20像素,由于字符实际在canvas画布中占据的宽度无法得知,所以预先设定的固定宽度并不准确。因此,在数据长度过长时容易超出坐标轴的显示范围,导致部分数据被截断显示不完整。
针对相关技术中当Echarts图表中数据长度过长时,容易导致数据显示不完整的问题,目前尚未提出有效的解决方案。
发明内容
本申请的主要目的在于提供一种Echarts图表的数据显示方法及装置,以解决相关技术中当Echarts图表中数据长度过长时,容易导致数据显示不完整的问题。
为了实现上述目的,根据本申请的一个方面,提供了一种Echarts图表的数据显示方法。该方法包括:获取待显示数据,其中,待显示数据为需要在Echarts图表上进行显示的数据;在待显示数据中获取字符长度最长的数据,得到目标数据;创建canvas画布并在canvas画布上绘制目标数据;计算目标宽度,其中,目标宽度为目标数据在canvas画布上所占据的宽度;以及根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据。
进一步地,计算目标宽度包括:确定绘制目标数据的像素点在canvas画布上的起始位置;确定绘制目标数据的像素点在canvas画布上的终止位置;以及根据起始位置和终止位置计算目标宽度。
进一步地,获取待显示数据包括:获取在Echarts图表的纵轴上需要进行显示的数据,得到待显示的纵轴数据,在待显示数据中获取字符长度最长的数据,得到目标数据包括:在待显示的纵轴数据中获取字符长度最长的数据,得到纵轴目标数据,创建canvas画布并在canvas画布上绘制目标数据包括:创建canvas画布并在canvas画布绘制纵轴目标数据,计算目标宽度包括:计算纵轴目标数据在canvas画布上所占据的宽度,得到纵轴目标宽度,根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据包括:根据纵轴目标宽度调整Echarts图表的纵轴边距并在调整纵轴边距后的Echarts图表的纵轴上显示待显示的纵轴数据。
进一步地,获取待显示数据包括:获取在Echarts图表的横轴上需要进行显示的数据,得到待显示的横轴数据,在待显示数据中获取字符长度最长的数据,得到目标数据包括:在待显示的横轴数据中获取字符长度最长的数据,得到横轴目标数据,创建canvas画布并在canvas画布上绘制目标数据包括:创建canvas画布并在canvas画布绘制横轴目标数据,计算目标宽度包括:计算横轴目标数据在canvas画布上所占据的宽度,得到横轴目标宽度,根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据包括:根据横轴目标宽度调整Echarts图表的横轴边距并在调整横轴边距后的Echarts图表的横轴上显示待显示的横轴数据。
为了实现上述目的,根据本申请的另一方面,提供了一种Echarts图表的数据显示装置。该装置包括:第一获取单元,用于获取待显示数据,其中,待显示数据为需要在Echarts图表上进行显示的数据;第二获取单元,用于在待显示数据中获取字符长度最长的数据,得到目标数据;绘制单元,用于创建canvas画布并在canvas画布上绘制目标数据;计算单元,用于计算目标宽度,其中,目标宽度为目标数据在canvas画布上所占据的宽度;以及第一显示单元,用于根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据。
进一步地,计算单元包括:第一确定模块,用于确定绘制目标数据的像素点在canvas画布上的起始位置;第二确定模块,用于确定绘制目标数据的像素点在canvas画布上的终止位置;以及第一计算模块,用于根据起始位置和终止位置计算目标宽度。
进一步地,第一获取单元包括:第一获取模块,用于获取在Echarts图表的纵轴上需要进行显示的数据,得到待显示的纵轴数据,第二获取单元包括:第二获取模块,用于在待显示的纵轴数据中获取字符长度最长的数据,得到纵轴目标数据,绘制单元包括:第一绘制模块,用于创建canvas画布并在canvas画布绘制纵轴目标数据,计算单元包括:第二计算模块,用于计算纵轴目标数据在canvas画布上所占据的宽度,得到纵轴目标宽度,第一显示单元包括:第一显示模块,用于根据纵轴目标宽度调整Echarts图表的纵轴边距并在调整纵轴边距后的Echarts图表的纵轴上显示待显示的纵轴数据。
进一步地,第一获取单元包括:第三获取模块,用于获取在Echarts图表的横轴上需要进行显示的数据,得到待显示的横轴数据,第二获取单元包括:第四获取模块,用于在待显示的横轴数据中获取字符长度最长的数据,得到横轴目标数据,绘制单元包括:第二绘制模块,用于创建canvas画布并在canvas画布绘制横轴目标数据,计算单元包括:第三计算模块,用于计算横轴目标数据在canvas画布上所占据的宽度,得到横轴目标宽度,第一显示单元包括:第二显示模块,用于根据横轴目标宽度调整Echarts图表的横轴边距并在调整横轴边距后的Echarts图表的横轴上显示待显示的横轴数据。
通过本申请,采用以下步骤:获取待显示数据,其中,待显示数据为需要在Echarts图表上进行显示的数据;在待显示数据中获取字符长度最长的数据,得到目标数据;创建canvas画布并在canvas画布上绘制目标数据;计算目标宽度,其中,目标宽度为目标数据在canvas画布上所占据的宽度;以及根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据,解决了相关技术中当Echarts图表中数据长度过长时,容易导致数据显示不完整的问题,通过在canvas画布上绘制字符长度最长的数据,来计算目标数据在canvas画布上所占据的宽度,得到目标宽度,从而根据目标宽度调整Echarts图表中坐标轴上显示字符串所需的宽度,即能够根据实际显示的数据进行自动调整Echarts图表的边距,进而实现保证Echarts图表中的数据显示完整的效果。
附图说明
构成本申请的一部分的附图用来提供对本申请的进一步理解,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1是根据本申请实施例的Echarts图表的数据显示方法的流程图;以及
图2是根据本申请实施例的Echarts图表的数据显示装置的示意图。
具体实施方式
需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
为了使本技术领域的人员更好地理解本申请方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分的实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本申请保护的范围。
需要说明的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
根据本申请的实施例,提供了一种Echarts图表的数据显示方法。
图1是根据本申请实施例的Echarts图表的数据显示方法的流程图。如图1所示,该方法包括以下步骤:
步骤S101,获取待显示数据,其中,待显示数据为需要在Echarts图表上进行显示的数据。
获取需要在Echarts图表上进行显示的数据,得到待显示数据。例如,获取到的待显示数据为10000,9500,120000,3000等多个数据。
在获取待显示数据之后,对Echarts图表进行初始化。在对Echarts图表进行初始化的过程中,会涉及到对Echarts图表的边距的设定,通过设定Echarts图表的边距则确定了Echarts图表中坐标轴的显示范围。因此,在对Echarts图表进行初始化的过程中,会判断待显示数据的长度是否过长,是否容易超出Echarts图表中坐标轴的显示范围导致部分数据被截断显示不完整。如果判定待显示数据的长度过长,则执行步骤S102。如果判定待显示数据的长度没有超出Echarts图表中坐标轴的显示范围,则直接对待显示数据进行显示。
步骤S102,在待显示数据中获取字符长度最长的数据,得到目标数据。
例如,获取到的待显示数据为10000,9500,120000,3000等多个数据,在待显示数据中获取字符长度最长的数据为120000,120000即为目标数据。
步骤S103,创建canvas画布并在canvas画布上绘制目标数据。
由于Echarts图表是在canvas画布进行显示的,根据上述得到的目标数据的字符长度并不能精确计算该目标数据在canvas画布中所占宽度,需要计算目标数据在canvas画布中所占据的宽度,因此需要创建canvas画布并在canvas画布上绘制目标数据。通过在HTML文档的Body节点,插入一个canvas元素,即新建了一个canvas画布。需要说明的是,新创建的canvas画布和Echarts图表需要保持一致的高度和宽度。
步骤S104,计算目标宽度,其中,目标宽度为目标数据在canvas画布上所占据的宽度。
可选地,在本申请实施例提供的Echarts图表的数据显示方法中,计算目标宽度包括:确定绘制目标数据的像素点在canvas画布上的起始位置;确定绘制目标数据的像素点在canvas画布上的终止位置;以及根据起始位置和终止位置计算目标宽度。
例如,在新创建的canvas画布,例如,使用黑色(十六进制值为:#000000)从canvas画布的左上角绘制目标数据,绘制的目标数据的大小和Echarts图表中显示的目标数据大小一致,绘制完成后,需计算目标数据在canvas画布所占据的宽度,从左上角开始(因为canvas画布的坐标0点在左上角),依次遍历每个像素点数据,查找像素点颜色值为#000000的像素点,且距离canvas画布左侧边界最远的像素点,取得此像素点的横坐标,即计算得到所绘制的目标数据在canvas画布上实际所占据的宽度。
需要说明的是,在本申请实施例提供的Echarts图表的数据显示方法中,不限定canvas画布使用具体某种颜色绘制目标数据。
步骤S105,根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据。
可选地,在本申请实施例提供的Echarts图表的数据显示方法中,获取待显示数据包括:获取在Echarts图表的纵轴上需要进行显示的数据,得到待显示的纵轴数据,在待显示数据中获取字符长度最长的数据,得到目标数据包括:在待显示的纵轴数据中获取字符长度最长的数据,得到纵轴目标数据,创建canvas画布并在canvas画布上绘制目标数据包括:创建canvas画布并在canvas画布绘制纵轴目标数据,计算目标宽度包括:计算纵轴目标数据在canvas画布上所占据的宽度,得到纵轴目标宽度,根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据包括:根据纵轴目标宽度调整Echarts图表的纵轴边距并在调整纵轴边距后的Echarts图表的纵轴上显示待显示的纵轴数据。
可选地,在本申请实施例提供的Echarts图表的数据显示方法中,获取待显示数据包括:获取在Echarts图表的横轴上需要进行显示的数据,得到待显示的横轴数据,在待显示数据中获取字符长度最长的数据,得到目标数据包括:在待显示的横轴数据中获取字符长度最长的数据,得到横轴目标数据,创建canvas画布并在canvas画布上绘制目标数据包括:创建canvas画布并在canvas画布绘制横轴目标数据,计算目标宽度包括:计算横轴目标数据在canvas画布上所占据的宽度,得到横轴目标宽度,根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据包括:根据横轴目标宽度调整Echarts图表的横轴边距并在调整横轴边距后的Echarts图表的横轴上显示待显示的横轴数据。
需要说明的是,本申请实施例提供的Echarts图表的数据显示方法,可以根据横轴目标宽度调整Echarts图表的横轴边距并在调整横轴边距后的Echarts图表的横轴上显示待显示的横轴数据,也可以根据纵轴目标宽度调整Echarts图表的纵轴边距并在调整纵轴边距后的Echarts图表的纵轴上显示待显示的纵轴数据,也可以根据横轴目标宽度调整Echarts图表的横轴边距并且根据纵轴目标宽度调整Echarts图表的纵轴边距,并在调整横轴边距和调整纵轴边距后的Echarts图表的坐标轴上显示待显示数据。在本申请中,通过在实际的canvas画布上绘制目标数据,来实际计算目标数据在canvas画布上所占据的宽度。通过上述得到的宽度动态调整Echarts图表的坐标轴与边界之间的边距,从而解决了相关技术中当Echarts图表中数据长度过长时,容易导致数据显示不完整的问题。
本申请实施例提供的Echarts图表的数据显示方法,通过获取待显示数据,其中,待显示数据为需要在Echarts图表上进行显示的数据;在待显示数据中获取字符长度最长的数据,得到目标数据;创建canvas画布并在canvas画布上绘制目标数据;计算目标宽度,其中,目标宽度为目标数据在canvas画布上所占据的宽度;以及根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据,解决了相关技术中当Echarts图表中数据长度过长时,容易导致数据显示不完整的问题,通过在canvas画布上绘制字符长度最长的数据,来计算目标数据在canvas画布上所占据的宽度,得到目标宽度,从而根据目标宽度调整Echarts图表中坐标轴上显示字符串所需的宽度,即能够根据实际显示的数据进行自动调整Echarts图表的边距,进而实现保证Echarts图表中的数据显示完整的效果。
需要说明的是,在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
本申请实施例还提供了一种Echarts图表的数据显示装置,需要说明的是,本申请实施例的Echarts图表的数据显示装置可以用于执行本申请实施例所提供的用于Echarts图表的数据显示方法。以下对本申请实施例提供的Echarts图表的数据显示装置进行介绍。
图2是根据本申请实施例的Echarts图表的数据显示装置的示意图。如图2所示,该装置包括:第一获取单元10、第二获取单元20、绘制单元30、计算单元40和第一显示单元50。
第一获取单元10,用于获取待显示数据,其中,待显示数据为需要在Echarts图表上进行显示的数据。
第二获取单元20,用于在待显示数据中获取字符长度最长的数据,得到目标数据。
绘制单元30,用于创建canvas画布并在canvas画布上绘制目标数据。
计算单元40,用于计算目标宽度,其中,目标宽度为目标数据在canvas画布上所占据的宽度。
第一显示单元50,用于根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据。
本申请实施例提供的Echarts图表的数据显示装置,通过第一获取单元10获取待显示数据,其中,待显示数据为需要在Echarts图表上进行显示的数据;第二获取单元20在待显示数据中获取字符长度最长的数据,得到目标数据;绘制单元30创建canvas画布并在canvas画布上绘制目标数据;计算单元40计算目标宽度,其中,目标宽度为目标数据在canvas画布上所占据的宽度;以及第一显示单元50根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据,解决了相关技术中当Echarts图表中数据长度过长时,容易导致数据显示不完整的问题,通过在canvas画布上绘制字符长度最长的数据,来计算目标数据在canvas画布上所占据的宽度,得到目标宽度,从而根据目标宽度调整Echarts图表中坐标轴上显示字符串所需的宽度,即能够根据实际显示的数据进行自动调整Echarts图表的边距,进而实现保证Echarts图表中的数据显示完整的效果。
可选地,在本申请实施例提供的Echarts图表的数据显示装置中,计算单元40包括:第一确定模块,用于确定绘制目标数据的像素点在canvas画布上的起始位置;第二确定模块,用于确定绘制目标数据的像素点在canvas画布上的终止位置;以及第一计算模块,用于根据起始位置和终止位置计算目标宽度。
可选地,在本申请实施例提供的Echarts图表的数据显示装置中,第一获取单元10包括:第一获取模块,用于获取在Echarts图表的纵轴上需要进行显示的数据,得到待显示的纵轴数据,第二获取单元20包括:第二获取模块,用于在待显示的纵轴数据中获取字符长度最长的数据,得到纵轴目标数据,绘制单元30包括:第一绘制模块,用于创建canvas画布并在canvas画布绘制纵轴目标数据,计算单元40包括:第二计算模块,用于计算纵轴目标数据在canvas画布上所占据的宽度,得到纵轴目标宽度,第一显示单元50包括:第一显示模块,用于根据纵轴目标宽度调整Echarts图表的纵轴边距并在调整纵轴边距后的Echarts图表的纵轴上显示待显示的纵轴数据。
可选地,在本申请实施例提供的Echarts图表的数据显示装置中,第一获取单元10包括:第三获取模块,用于获取在Echarts图表的横轴上需要进行显示的数据,得到待显示的横轴数据,第二获取单元20包括:第四获取模块,用于在待显示的横轴数据中获取字符长度最长的数据,得到横轴目标数据,绘制单元30包括:第二绘制模块,用于创建canvas画布并在canvas画布绘制横轴目标数据,计算单元40包括:第三计算模块,用于计算横轴目标数据在canvas画布上所占据的宽度,得到横轴目标宽度,第一显示单元50包括:第二显示模块,用于根据横轴目标宽度调整Echarts图表的横轴边距并在调整横轴边距后的Echarts图表的横轴上显示待显示的横轴数据。
所述Echarts图表的数据显示装置包括处理器和存储器,上述第一获取单元、第二获取单元、绘制单元、计算单元和第一显示单元等均作为程序单元存储在存储器中,由处理器执行存储在存储器中的上述程序单元实现相应功能。
处理器中包含内核,由内核去存储器中调取相应的程序单元。内核可以设置一个或以上,通过调整内核参数显示Echarts图表中的数据。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM),存储器包括至少一个存储芯片。
本申请还提供了一种计算机程序产品的实施例,当在数据处理设备上执行时,适于执行初始化有如下方法步骤的程序代码:获取待显示数据,其中,待显示数据为需要在Echarts图表上进行显示的数据;在待显示数据中获取字符长度最长的数据,得到目标数据;创建canvas画布并在canvas画布上绘制目标数据;计算目标宽度,其中,目标宽度为目标数据在canvas画布上所占据的宽度;以及根据目标宽度调整Echarts图表的边距并在调整后的Echarts图表上显示待显示数据。
需要说明的是,对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本申请并不受所描述的动作顺序的限制,因为依据本申请,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本申请所必须的。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置,可通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
显然,本领域的技术人员应该明白,上述的本申请的各模块或各步骤可以用通用的计算装置来实现,它们可以集中在单个的计算装置上,或者分布在多个计算装置所组成的网络上,可选地,它们可以用计算装置可执行的程序代码来实现,从而,可以将它们存储在存储装置中由计算装置来执行,或者将它们分别制作成各个集成电路模块,或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样,本申请不限制于任何特定的硬件和软件结合。
以上所述仅为本申请的优选实施例,并不用于限制本申请,对于本领域的技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。
Claims (8)
1.一种Echarts图表的数据显示方法,其特征在于,包括:
获取待显示数据,其中,所述待显示数据为需要在Echarts图表上进行显示的数据;
在所述待显示数据中获取字符长度最长的数据,得到目标数据;
创建canvas画布并在所述canvas画布上绘制所述目标数据;
计算目标宽度,其中,所述目标宽度为所述目标数据在所述canvas画布上所占据的宽度;以及
根据所述目标宽度调整所述Echarts图表的边距并在调整后的Echarts图表上显示所述待显示数据。
2.根据权利要求1所述的方法,其特征在于,计算所述目标宽度包括:
确定绘制所述目标数据的像素点在所述canvas画布上的起始位置;
确定绘制所述目标数据的像素点在所述canvas画布上的终止位置;以及
根据所述起始位置和所述终止位置计算所述目标宽度。
3.根据权利要求1所述的方法,其特征在于,
获取待显示数据包括:获取在Echarts图表的纵轴上需要进行显示的数据,得到待显示的纵轴数据,
在所述待显示数据中获取字符长度最长的数据,得到目标数据包括:在所述待显示的纵轴数据中获取字符长度最长的数据,得到纵轴目标数据,
创建canvas画布并在所述canvas画布上绘制所述目标数据包括:创建所述canvas画布并在所述canvas画布绘制所述纵轴目标数据,
计算目标宽度包括:计算所述纵轴目标数据在所述canvas画布上所占据的宽度,得到纵轴目标宽度,
根据所述目标宽度调整所述Echarts图表的边距并在调整后的Echarts图表上显示所述待显示数据包括:根据所述纵轴目标宽度调整所述Echarts图表的纵轴边距并在调整纵轴边距后的所述Echarts图表的纵轴上显示所述待显示的纵轴数据。
4.根据权利要求1所述的方法,其特征在于,
获取待显示数据包括:获取在Echarts图表的横轴上需要进行显示的数据,得到待显示的横轴数据,
在所述待显示数据中获取字符长度最长的数据,得到目标数据包括:在所述待显示的横轴数据中获取字符长度最长的数据,得到横轴目标数据,
创建canvas画布并在所述canvas画布上绘制所述目标数据包括:创建所述canvas画布并在所述canvas画布绘制所述横轴目标数据,
计算目标宽度包括:计算所述横轴目标数据在所述canvas画布上所占据的宽度,得到横轴目标宽度,
根据所述目标宽度调整所述Echarts图表的边距并在调整后的Echarts图表上显示所述待显示数据包括:根据所述横轴目标宽度调整所述Echarts图表的横轴边距并在调整横轴边距后的所述Echarts图表的横轴上显示所述待显示的横轴数据。
5.一种Echarts图表的数据显示装置,其特征在于,包括:
第一获取单元,用于获取待显示数据,其中,所述待显示数据为需要在Echarts图表上进行显示的数据;
第二获取单元,用于在所述待显示数据中获取字符长度最长的数据,得到目标数据;
绘制单元,用于创建canvas画布并在所述canvas画布上绘制所述目标数据;
计算单元,用于计算目标宽度,其中,所述目标宽度为所述目标数据在所述canvas画布上所占据的宽度;以及
第一显示单元,用于根据所述目标宽度调整所述Echarts图表的边距并在调整后的Echarts图表上显示所述待显示数据。
6.根据权利要求5所述的装置,其特征在于,所述计算单元包括:
第一确定模块,用于确定绘制所述目标数据的像素点在所述canvas画布上的起始位置;
第二确定模块,用于确定绘制所述目标数据的像素点在所述canvas画布上的终止位置;以及
第一计算模块,用于根据所述起始位置和所述终止位置计算所述目标宽度。
7.根据权利要求5所述的装置,其特征在于,
所述第一获取单元包括:第一获取模块,用于获取在Echarts图表的纵轴上需要进行显示的数据,得到待显示的纵轴数据,
所述第二获取单元包括:第二获取模块,用于在所述待显示的纵轴数据中获取字符长度最长的数据,得到纵轴目标数据,
所述绘制单元包括:第一绘制模块,用于创建所述canvas画布并在所述canvas画布绘制所述纵轴目标数据,
所述计算单元包括:第二计算模块,用于计算所述纵轴目标数据在所述canvas画布上所占据的宽度,得到纵轴目标宽度,
所述第一显示单元包括:第一显示模块,用于根据所述纵轴目标宽度调整所述Echarts图表的纵轴边距并在调整纵轴边距后的所述Echarts图表的纵轴上显示所述待显示的纵轴数据。
8.根据权利要求5所述的装置,其特征在于,
所述第一获取单元包括:第三获取模块,用于获取在Echarts图表的横轴上需要进行显示的数据,得到待显示的横轴数据,
所述第二获取单元包括:第四获取模块,用于在所述待显示的横轴数据中获取字符长度最长的数据,得到横轴目标数据,
所述绘制单元包括:第二绘制模块,用于创建所述canvas画布并在所述canvas画布绘制所述横轴目标数据,
所述计算单元包括:第三计算模块,用于计算所述横轴目标数据在所述canvas画布上所占据的宽度,得到横轴目标宽度,
所述第一显示单元包括:第二显示模块,用于根据所述横轴目标宽度调整所述Echarts图表的横轴边距并在调整横轴边距后的所述Echarts图表的横轴上显示所述待显示的横轴数据。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201510710882.5A CN106610926A (zh) | 2015-10-27 | 2015-10-27 | Echarts图表的数据显示方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201510710882.5A CN106610926A (zh) | 2015-10-27 | 2015-10-27 | Echarts图表的数据显示方法及装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN106610926A true CN106610926A (zh) | 2017-05-03 |
Family
ID=58615097
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201510710882.5A Pending CN106610926A (zh) | 2015-10-27 | 2015-10-27 | Echarts图表的数据显示方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106610926A (zh) |
Cited By (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107315729A (zh) * | 2017-06-14 | 2017-11-03 | 网易(杭州)网络有限公司 | 用于图表的数据处理方法、介质、装置和计算设备 |
CN109977130A (zh) * | 2019-03-29 | 2019-07-05 | 珠海豹好玩科技有限公司 | 一种热词展示方法及系统 |
CN110020285A (zh) * | 2017-09-28 | 2019-07-16 | 北京国双科技有限公司 | 柱状图的处理方法及装置 |
CN111783390A (zh) * | 2020-07-07 | 2020-10-16 | 北京字节跳动网络技术有限公司 | 维度标签的调整方法、装置以及电子设备 |
CN112231372A (zh) * | 2020-10-27 | 2021-01-15 | 腾讯科技(深圳)有限公司 | 数据处理方法、装置、计算机设备和存储介质 |
CN112307112A (zh) * | 2020-11-06 | 2021-02-02 | 广东电网有限责任公司佛山供电局 | 一种供电所数据看板展示方法和系统 |
CN113705156A (zh) * | 2021-08-30 | 2021-11-26 | 上海哔哩哔哩科技有限公司 | 字符处理方法及装置 |
CN114281450A (zh) * | 2021-12-09 | 2022-04-05 | 山石网科通信技术股份有限公司 | 图表的可视化方法、装置、存储介质及处理器 |
CN117687737A (zh) * | 2024-02-01 | 2024-03-12 | 成都数之联科技股份有限公司 | 一种Echarts图表显示优化方法及系统 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102566991A (zh) * | 2010-12-17 | 2012-07-11 | 金蝶软件(中国)有限公司 | 一种在控件中显示数据的方法和装置 |
CN104503719A (zh) * | 2014-12-11 | 2015-04-08 | 北京国双科技有限公司 | 用于显示控件中显示体位置的数据处理方法和装置 |
-
2015
- 2015-10-27 CN CN201510710882.5A patent/CN106610926A/zh active Pending
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102566991A (zh) * | 2010-12-17 | 2012-07-11 | 金蝶软件(中国)有限公司 | 一种在控件中显示数据的方法和装置 |
CN104503719A (zh) * | 2014-12-11 | 2015-04-08 | 北京国双科技有限公司 | 用于显示控件中显示体位置的数据处理方法和装置 |
Non-Patent Citations (1)
Title |
---|
243573295: "Echarts-axislabel文字过长导致显示不全或重叠", 《博客园HTTP://WWW.CNBLOGS.COM/HWAGGLEE/P/4762467.HTML》 * |
Cited By (15)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107315729B (zh) * | 2017-06-14 | 2020-09-15 | 网易(杭州)网络有限公司 | 用于图表的数据处理方法、介质、装置和计算设备 |
CN107315729A (zh) * | 2017-06-14 | 2017-11-03 | 网易(杭州)网络有限公司 | 用于图表的数据处理方法、介质、装置和计算设备 |
CN110020285A (zh) * | 2017-09-28 | 2019-07-16 | 北京国双科技有限公司 | 柱状图的处理方法及装置 |
CN110020285B (zh) * | 2017-09-28 | 2021-04-27 | 北京国双科技有限公司 | 柱状图的处理方法及装置 |
CN109977130A (zh) * | 2019-03-29 | 2019-07-05 | 珠海豹好玩科技有限公司 | 一种热词展示方法及系统 |
CN109977130B (zh) * | 2019-03-29 | 2021-09-28 | 珠海豹好玩科技有限公司 | 一种热词展示方法及系统 |
CN111783390B (zh) * | 2020-07-07 | 2023-09-29 | 抖音视界有限公司 | 维度标签的调整方法、装置以及电子设备 |
CN111783390A (zh) * | 2020-07-07 | 2020-10-16 | 北京字节跳动网络技术有限公司 | 维度标签的调整方法、装置以及电子设备 |
CN112231372A (zh) * | 2020-10-27 | 2021-01-15 | 腾讯科技(深圳)有限公司 | 数据处理方法、装置、计算机设备和存储介质 |
CN112231372B (zh) * | 2020-10-27 | 2024-10-15 | 腾讯科技(深圳)有限公司 | 数据处理方法、装置、计算机设备和存储介质 |
CN112307112A (zh) * | 2020-11-06 | 2021-02-02 | 广东电网有限责任公司佛山供电局 | 一种供电所数据看板展示方法和系统 |
CN113705156A (zh) * | 2021-08-30 | 2021-11-26 | 上海哔哩哔哩科技有限公司 | 字符处理方法及装置 |
CN114281450A (zh) * | 2021-12-09 | 2022-04-05 | 山石网科通信技术股份有限公司 | 图表的可视化方法、装置、存储介质及处理器 |
CN117687737A (zh) * | 2024-02-01 | 2024-03-12 | 成都数之联科技股份有限公司 | 一种Echarts图表显示优化方法及系统 |
CN117687737B (zh) * | 2024-02-01 | 2024-04-12 | 成都数之联科技股份有限公司 | 一种Echarts图表显示优化方法及系统 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106610926A (zh) | Echarts图表的数据显示方法及装置 | |
US11281943B2 (en) | Method for generating training data, image semantic segmentation method and electronic device | |
CN109446883B (zh) | 商品状态识别方法、装置、电子设备及可读存储介质 | |
EP3218878B1 (en) | Image to item mapping | |
CN109992226A (zh) | 图像显示方法、装置及拼接显示屏 | |
CN104252700B (zh) | 一种红外图像的直方图均衡化方法 | |
JP2020504868A5 (zh) | ||
CN106775600A (zh) | HTML5 canvas画布的处理方法及装置 | |
CN110288692B (zh) | 光照渲染方法和装置、存储介质及电子装置 | |
CN110223222A (zh) | 图像拼接方法、图像拼接装置和计算机可读存储介质 | |
CN110570435A (zh) | 用于对车辆损伤图像进行损伤分割的方法及装置 | |
CN109636890A (zh) | 纹理融合方法和装置、电子设备、存储介质、产品 | |
CN109308716A (zh) | 一种图像匹配方法、装置、电子设备及存储介质 | |
CN107807807A (zh) | 显示窗口的信号源缩放方法和系统 | |
CN107423366A (zh) | 一种轮播图切换方法及装置 | |
CN104735467A (zh) | 视频画中画广告生成方法及装置 | |
CN113486941B (zh) | 直播图像的训练样本生成方法、模型训练方法及电子设备 | |
CN113269728B (zh) | 视觉巡边方法、设备、可读存储介质及程序产品 | |
CN114692034A (zh) | 图像显示方法、装置、电子设备及计算机存储介质 | |
CN113378864A (zh) | 一种锚框参数的确定方法、装置、设备及可读存储介质 | |
CN109359167A (zh) | 基于观测目标的条带划分方法 | |
CN105068984A (zh) | 一种自动拼图排版方法 | |
CN108062785A (zh) | 面部图像的处理方法及装置、计算设备 | |
CN108156504B (zh) | 一种视频显示方法及装置 | |
CN104239874B (zh) | 一种器官血管识别方法及装置 |
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 | ||
CB02 | Change of applicant information |
Address after: 100083 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing Applicant after: Beijing Guoshuang Technology Co.,Ltd. Address before: 100086 Cuigong Hotel, 76 Zhichun Road, Shuangyushu District, Haidian District, Beijing Applicant before: Beijing Guoshuang Technology Co.,Ltd. |
|
CB02 | Change of applicant information | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20170503 |
|
RJ01 | Rejection of invention patent application after publication |