HighCharts自定义坐标轴刻度

当Highcharts默认的坐标轴刻度不符合需求时,可以通过重写yAxis的tickPositioner方法来自定义刻度分布。这在数值范围不确定或跨度较大时尤其有用,能避免数据标签显示问题。示例代码展示了如何将Y轴均匀分为5个间隔,生成6个刻度,以优化图表的视觉效果。
摘要由CSDN通过智能技术生成

       Highcharts.js图表自身,会根据y轴的数值,计算出一套y轴刻度,但是有时这种自带的计算方式并不符合我们的要求,这时,我们可以自己写一套算法。

      虽然yAxis的tickInterval可以设置y轴刻度的步长,但是当我们并不确定Y轴的数值范围或当最大值与最小值跨度较大时,并不实用。tickPixelInterval虽然可以设置坐标轴刻度之间像素距离,但最终的结果仍然是经过了Highcharts默认的一套算法计算过了,并不是完全按照tickPixelInterval的设置来的。而且如果我们需要在柱状图的柱子上方显示数值dataLabels,当数值较大时,有可能会导致数值显示被挤到柱子内部而不是上方。如下图:

       这是因为,正常显示的位置不够了,而又没有设置可以超过图表区域,就会掉到下面了。归根结底还是y轴刻度分布不合理。通过重写yAxis的tickPositioner返回值,可以自定义一套Y轴刻度的计算方法,代码如下:

yAxis: {
    			min: 0,
				lineColor: &
  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值