fusioncharts图表横坐标刻度最后一个显示不全且图表距离右边距离太小的完美解决方案

来源:互联网 发布:周启新数据 编辑:程序博客网 时间:2024/05/01 08:00

在项目开发中遇到,好好研究控件,使用方案四

一、方案一

思路:通过控制横坐标刻度的步长(labelStep来加以控制。换言之就是我控制横坐标刻度显示的个数,加上总个数,来获得labelStep的步长值是多少。

算法labelStep= 横坐标刻度总个数/横坐标刻度显示个数;

最终效果

1、由于我的labelDisplay没有设置任何值,结果导致刻度多的情况下,所有的刻度自适应变成了竖直显示。由于刻度竖直显示,占去了图表很大一块有效空间。


二、方案二

思路:通过设置labelDisplay = "WRAP" 坐标刻度横着显示,长的时候自动折行显示刻度值。

最终效果

坐标刻度的确是横着显示了的。可是发现最后一个刻度值隐藏了一部分,却没有折行显示。只有我将鼠标放于刻度值上方可看到刻度具体的值。鉴于此,才有了下面的方案三。


三、方案三

思路:通过设置labelDisplay=“NONE” 让刻度值显示无特殊情况。

最终效果

最后一个坐标刻度显示完整,却发现拥挤在了一起,主要原因是由于图表距离右边的距离太小了,不是很美观。


四、方案四(终极方案/完美方案)

思路:设置图表距离右边界的属性值来达到完美效果。chartRightMargin = ‘50’

最终效果

1、横坐标刻度值横着显示且每个刻度值均显示完整。

2、图表距离左右边界的距离相当,整体预览着实美观。

完美呈现横坐标刻度值和右边界距离


0 0