javascript - Highchart 十字准线不接触 x 轴

Question

我想增加 xAxis 十字准线的高度以接触 x 轴。有没有办法实现这一目标。下面我附上了相同的屏幕截图和代码片段

Highcharts.chart(container, {
   title: {
     text: ""
    },
    xAxis: {
     type: "datetime",
     crosshair: true
    }
}

我尝试将它用作工具提示选项

 tooltip: {
        crosshairs: {
            color: 'green',
            width:  2,
            height: 10

        }
    }

它接受宽度但不接受高度选项

Js fiddle example

Answer 1

目前，十字准线指向 x 轴基线预期所在的位置(不考虑偏移)，正如 Mike Zavarello 在评论中所描述的那样。

根据我对你的情况的理解，一个解决方法是扩展 Highcharts，而不是从你的第一个 y 轴(最接近顶部的那个)的最大值绘制十字线到你的第二个 y 轴的底部(最接近的那个底部)。

例如 ( JSFiddle ):

(function (H) {
    H.wrap(H.Axis.prototype, 'drawCrosshair', function (proceed, e, point) {
        let old_function = H.Axis.prototype.getPlotLinePath;
        H.Axis.prototype.getPlotLinePath = function (value, lineWidth, old, force, translatedValue) {
            // copy paste handling of x value and sane value threshold
            translatedValue = Math.min(Math.max(-1e5, translatedValue), 1e5);
            x1 = x2 = Math.round(translatedValue + this.transB);

            // max displayed value of your top y-axis
            y1 = this.chart.yAxis[0].toPixels(this.chart.yAxis[0].max);
            // min displayed value of your bottom y-axis
            y2 = this.chart.yAxis[1].toPixels(this.chart.yAxis[1].min);

            return this.chart.renderer.crispLine(
                ['M', x1, y1, 'L', x2, y2],
                lineWidth || 1
            );
        };
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        H.Axis.prototype.getPlotLinePath = old_function;
    });
}(Highcharts));

请注意，此方法通过扩展 Axis.drawCrosshair 非常直接地解决了您的问题，并在该扩展中重写了 Axis.getPlotLinePath 函数以更改给定的路径十字线。它也不解决沿 y 轴的十字准线。不过，这可能会以类似的方式解决。应该对其进行彻底的工件测试。