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

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

一、方案一

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

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

最终效果

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


二、方案二

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

最终效果

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


三、方案三

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

最终效果

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


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

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

最终效果

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

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

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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值