Question

如何在mouseover xAxis标签上选择列（十字准线）？

我可以鼠标悬停标签，但不知道如何选择列。

$(document).on('mouseover', '.highcharts-axis:eq(' + (axisCount - 1) + ') text, .highcharts-axis-labels:eq(' + (axisCount - 1) + ') text', function () {
    console.log('mouseover');
    // hover current column - crosshairs
});

http://jsfiddle.net/o355e82b/3/（图片应该如何 - 内部）

Answer 1

您可以包裹十字准线功能并修改绘制元素的高度。

(function (HC) {
    HC.wrap(HC.Axis.prototype, 'drawCrosshair', function (proceed, e, point) {

        var path,
        options = this.crosshair,
            animation = options.animation,
            pos,
            attribs,
            categorized;

        if (
        // Disabled in options
        !this.crosshair ||
        // Snap
        ((defined(point) || !HC.pick(this.crosshair.snap, true)) === false)) {
            this.hideCrosshair();

        } else {

            // Get the path
            if (!HC.pick(options.snap, true)) {
                pos = (this.horiz ? e.chartX - this.pos : this.len - e.chartY + this.pos);
            } else if (defined(point)) {
                pos = this.isXAxis ? point.plotX : this.len - point.plotY; // #3834
            }

            if (this.isRadial) {
                path = this.getPlotLinePath(this.isXAxis ? point.x : pick(point.stackY, point.y)) || null; // #3189
            } else {
                path = this.getPlotLinePath(null, null, null, null, pos) || null; // #3189
            }

            if (path === null) {
                this.hideCrosshair();
                return;
            }

            // Draw the cross
            if (this.cross) {    
                //overwrite a height
                path[5] = point.series.chart.containerHeight;

                this.cross.attr({
                    visibility: VISIBLE
                })[animation ? 'animate' : 'attr']({
                    d: path
                }, animation);
            } else {
                categorized = this.categories && !this.isRadial;
                attribs = {
                    'stroke-width': options.width || (categorized ? this.transA : 1),
                    stroke: options.color || (categorized ? 'rgba(155,200,255,0.2)' : '#C0C0C0'),
                    zIndex: options.zIndex || 2
                };
                if (options.dashStyle) {
                    attribs.dashstyle = options.dashStyle;
                }

                this.cross = this.chart.renderer.path(path).attr(attribs).add();
            }

        }

    });

})(Highcharts);

示例：http://jsfiddle.net/o355e82b/5/

Highcharts：如何在mouseover xAxis标签上选择列（十字准线）

1 个答案: