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

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

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

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

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

        }
    }

它采用宽度但不采用高度选项

Js fiddle example

最佳答案

目前，十字准线指向 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 轴的十字准线。不过，这可能可以用类似的方式解决。应该对工件进行彻底的测试。

关于javascript - Highchart 十字准线不接触 x 轴，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51472109/