HighChart坐标轴标签旋转及刻度线调整+格式化小数点
  Pv0IpoDO5CJz 2023年11月19日 28 0


标签及字符串格式化 | Highcharts 使用教程

需求:坐标轴标签旋转需要将X轴刻度标签旋转X度,突出刻度线长度、宽度、颜色,使其整体上更美观,需要保留小数点。

分析:  坐标轴标签旋转需要用rotation来控制,刻度线需分别用tickWidth(刻度宽度)tickLength(刻度长度)tickColor(刻度颜色)来控制。而格式化小数点要用数值格式化。{point.y:.1f}保留一位小数{point.y:.2f}保留两位小数{point.y:.0f}不保留小数

解决

源代码截图

HighChart坐标轴标签旋转及刻度线调整+格式化小数点_保留两位小数

示例

保留0位小数:

HighChart坐标轴标签旋转及刻度线调整+格式化小数点_保留两位小数_02

保留一位小数:

HighChart坐标轴标签旋转及刻度线调整+格式化小数点_坐标轴_03

HighChart坐标轴标签旋转、刻度线调整和格式化小数点功能,以百分比堆叠柱状图为例介绍实现方法

1、 配置柱状图(column)的包装对象类型(plotOptions)

  1) 添加labels(标签)

        tickWidth(刻度宽度)

        tickLength(刻度长度)

        tickColor(刻度颜色)

  2) 在labels(标签)里添加rotation(旋转)来进行刻度标签旋转

  3) 自定义需要的值

2、 用数值格式化进行保留小数点操作

  1){point.y:.1f}保留一位小数

  2){point.y:.2f}保留两位小数

  3){point.y:.0f}不保留小数

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月19日 0

暂无评论

推荐阅读
Pv0IpoDO5CJz