Highcharts 将网格线绘制到 yAxis 区域

【问题标题】：Highcharts draw grid lines into yAxis areaHighcharts 将网格线绘制到 yAxis 区域
【发布时间】：2019-02-13 13:24:06
【问题描述】：

在 Highcharts 中，可以使用

将 y 轴标签移动到绘图区域中

yAxis: {
    labels: {
        align: 'left',
        x: 0,
        y: -2
    }
}

使用此设置，标签被线条、数据标签等覆盖。

是否可以在 yAxis-Label-Area 上绘制水平网格线而不使 xAxis 和系列从那里开始。下图中的黑线表示希望的行为。

【问题讨论】：

标签： highcharts

【解决方案1】：

最简单的解决方法是调整xAxis，例如：

xAxis: {
    min: -0.5
}

现场演示：http://jsfiddle.net/BlackLabel/qnayxb04/

API：https://api.highcharts.com/highcharts/xAxis.min

如果你想对线条有更多的控制，你可以使用setAttribute来编辑path元素：

chart: {
    events: {
        load: function() {
            var gridLines = this.yAxis[0].gridGroup.element.children,
                i,
                path;

            for (i = 0; i < gridLines.length; i++) {
                path = gridLines[i].attributes.d.nodeValue;
                path = 'M 40' + path.substr(4);

                gridLines[i].setAttribute('d', path)
            }
        }
    }
}

现场演示：http://jsfiddle.net/BlackLabel/61h5qtn9/1/

【讨论】：