Highcharts：将标记与 xAxis 对齐答案

【问题标题】：Highcharts: align markers with xAxisHighcharts：将标记与 xAxis 对齐
【发布时间】：2019-12-07 01:07:40
【问题描述】：

我有一个类型为area 的图表，带有较小的网格线和一个datetime xAxis。 data 是通过 y 值数组提供的，我必须根据 data 长度成功渲染 xAxis 标签。

我的问题是：

图表在 X 轴上有不需要的填充
标记与其标签不对齐

检查一下：

这是一个有效的小提琴：https://jsfiddle.net/fernandaparisi/e07q32ay/53/

我注意到，如果我删除所有 max、min、tickInterval、pointStart 和 pointInterval 属性，标记会正确对齐，但图表不会扩展其全部可用宽度。

margin 和 spacing 图表属性似乎会影响整个图表，而不是绘图区域。

有什么想法吗？

【问题讨论】：

标签： highcharts

【解决方案1】：

填充是由tickInterval 和endOnTick: true 组合引起的，要删除它只需禁用endOnTick。
要以不同的方式定位标签，请使用align、x 和y 属性。

xAxis: {
    labels: {
        align: 'center',
        y: 30,
        formatter: function() {
            return Highcharts.dateFormat('%e %b', this.value);
        },
        rotation: -45
    },
    title: undefined,
    type: 'datetime',
    min: lastSunday - (weekLength * (data.length - 1)),
    max: lastSunday,
    tickInterval: weekLength,
    endOnTick: false,
    minorTickInterval: weekLength
}

现场演示： https://jsfiddle.net/BlackLabel/eLbp48d3/

API 参考：

https://api.highcharts.com/highstock/xAxis.labels.align

https://api.highcharts.com/highstock/xAxis.endOnTick

【讨论】：