代码之家 › 专栏 › 技术社区 › Supertracer

不接触X轴的海图十字线

highcharts javascript

3

Supertracer · 技术社区 · 8 年前

我想增加我的X轴十字线的高度来触摸X轴。有办法做到这一点吗下面我附上了屏幕截图和代码片段

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

我试着用它作为工具提示选项

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

        }
    }

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

Js fiddle example

2 回复 | 直到 8 年前

1

3

Halvor Holsten Strand mtorres 8 年前

目前十字准线进入X轴基线预期的位置(不考虑偏移量),正如Mike Zavarello在评论中所描述的那样。

从我对你的情况的理解中的一个解决办法是扩展HyjStand,而不是从你的第一个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轴的十字准线。不过,这可能也可以用类似的方式解决它应该经过彻底的人工制品测试。

2

1

ppotaczek 8 年前

十字准线的长度与XAXIS高度相同,所以根据结果,要实现右Xax轴的高度设置。轴偏移不影响十字准线。

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

现场演示: http://jsfiddle.net/BlackLabel/w5c82ja9/