highcharts报表四：xAxis X 轴（或分类轴）通用配置

最新推荐文章于 2021-12-16 16:53:11 发布

原创最新推荐文章于 2021-12-16 16:53:11 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了Highcharts中的X轴（或分类轴）配置，包括其默认位置、如何通过chart.inverted属性改变轴的位置，以及在多轴情况下的数组配置方式。同时，强调了可以通过坐标轴对象实现动态更新和更多操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**X 轴（或分类轴）。默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。
在多轴中，xAxis 可以配置成数组的形式。
X 轴可以通过坐标轴对象来进行动态更新或进行其他操作。**



xAxis {

        // x坐标轴中的分类
        categories :[1,2,3,.....]   // Array<String> 

        // 配置跟随鼠标或鼠标滑过点时的十字准星线
        crosshair: {
                     dashStyle : 'shortdot',
                     color : '#cccccc',
                     zIndex : 1,
        },

        // 时间轴标签的格式化字符串
        type : 'datetime',
        dateTimeLabelFormats: {
             day: '%Y-%m-%d',
             month : '%Y-%m'
        },

        // 坐标轴标签
        labels: {
             align : 'center' // 坐标轴标签位置
             enabled: true // 是否显示坐标轴标签, 默认显示

             // 坐标轴内容格式化函数
             formatter: function () {
                 return '<a href="' + categoryLinks[this.value] + '">' +
                     this.value + '</a>';
             }

            // x轴旋转
            rotation: 0 

            // 设置轴标签的样式
            style : {
                color : xxx.
                fontSize : 18
            }

            // 是否显示坐标轴，默认显示，false不显示
            visible : true
}