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轴的十字线。尽管如此，这可能可以通过类似的方式解决。应该对它进行彻底的工件测试。

Answer 2

十字准线的长度与xAxis高度相同，因此根据您要获得正确的xAxis高度的结果。轴偏移不会影响十字准线。

xAxis: {
    crosshair: true,
    height: 343, //  yAxis[1].top - yAxis[0].top + yAxis[1].height
    offset: -174
}

实时演示：http://jsfiddle.net/BlackLabel/w5c82ja9/

Highchart十字准线未接触x轴

2 个答案: