You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Highstock双列图表中将标题居中并保留两侧刻度?

Highstock双列图表:标题居中+保留两侧刻度实现方案

1. 标题居中快速设置

直接修改title配置的align属性为center,就能让标题自动居中,无需额外调整偏移:

title: {
    text: '你的图表标题',
    align: 'center' // 关键配置
}

2. 保留两侧刻度(分两种场景)

场景A:Y轴左右两侧都有刻度

如果双列数据对应左右两个Y轴,给两个Y轴分别配置位置和刻度显示:

yAxis: [
    // 左侧Y轴
    {
        title: { text: '左列数据' },
        lineWidth: 1, // 显示轴线
        tickWidth: 1 // 显示刻度线
    },
    // 右侧Y轴
    {
        opposite: true, // 让Y轴显示在右侧
        title: { text: '右列数据' },
        lineWidth: 1,
        tickWidth: 1
    }
]
// 对应绑定数据系列
series: [
    { name: '左列', type: 'column', yAxis: 0, data: [/* 你的数据 */] },
    { name: '右列', type: 'column', yAxis: 1, data: [/* 你的数据 */] }
]

场景B:X轴上下两侧都有刻度

要是需要X轴顶部和底部都显示刻度,配置两个X轴,开启opposite让其中一个在顶部:

xAxis: [
    // 底部X轴
    {
        categories: ['Jan', 'Feb', 'Mar', /* ... */],
        lineWidth: 1,
        tickWidth: 1
    },
    // 顶部X轴
    {
        opposite: true,
        categories: ['Jan', 'Feb', 'Mar', /* ... */],
        lineWidth: 1,
        tickWidth: 1
    }
]

针对你现有示例的修改

结合你提供的演示代码,只需要两步就能达成需求:

  1. 把title的align属性修改为center
  2. 删除两个X轴配置中的tickPositions: [],让刻度正常显示

内容的提问来源于stack exchange,提问作者Ivan Kondratev

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.06 13:05:31