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

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

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

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

解决：

源代码截图

示例：

保留0位小数：

保留一位小数：

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}不保留小数