HIghcharts 列标记未与列对齐

Posted 2023-03-14

【中文标题】HIghcharts 列标记未与列对齐

【英文标题】：HIghcharts column tickmarks not aligned to column

【发布时间】：2017-11-15 12:04:10

【问题描述】：

我有一个包含 11 列的柱形图，我想在每列中间的 x 轴上有一个带有标签的刻度线。但是，我无法让刻度线和标签与我的列对齐。我创建了一个 jsfiddle 来说明我的问题。我在 x 轴上设置了 min、max 和 tickInterval，但它似乎根本没有使用 min 和 max 值。相反，我的开始刻度显示 7.2 和最后 27。我做错了什么？

https://jsfiddle.net/LLExL/8218/

Highcharts.chart('container', 
    "chart": 
        "width": 850,
        "height": 450,
    type: 'column'
    ,
  plotOptions: 
    column: 
      pointPlacement: 'between'
    
  ,
    "yAxis": [
        "lineWidth": 1,
        "gridLineWidth": 1,
        "tickWidth": 1,
    ],
    "xAxis": [
        "startOnTick": true,
        "endOnTick": true,
        "min": 8,
        "max": 26,
        "tickInterval": 1.8,
        "gridLineWidth": 1,
        "tickWidth": 1,
    tickmarkPlacement: 'on'
    ],
    "series": [
        "data": [
            [8, 4.15],
            [9.8, 17.61],
            [11.6, 48.32],
            [13.4, 108.65],
            [15.2, 53.92],
            [17, 138.87],
            [18.8, 152.77],
            [20.6, 69.17],
            [22.4, 18.27],
            [24.2, 8.82],
            [26, 1.43]
        ],
        "name": "Test",
    "pointStart": 8,
    "pointInterval": 1.8
    ]
);

【问题讨论】：

确实如此！谢谢你:)

【参考方案1】：

使用tickPositions，您可以将刻度放在任何您想要的位置。因此，例如为了适合您的列，您可以这样做：

xAxis: [
  tickPositions: [8, 9.8, 11.6, 13.4...]
  ...
]

工作示例：https://jsfiddle.net/ewolden/LLExL/8219/

xAxis.tickPositions 上的 API： https://api.highcharts.com/highcharts/xAxis.tickPositions