javascript - 轴上带有标签的 Highcharts 十字准线

Question

是否可以制作高图十字准线，在单独的标签中显示轴上的实际值？

API 中的常规十字准线示例不会这样做。如果我设置

tooltip: {
        crosshairs: [true, true]
    }

，它没有做我需要的。我需要图表看起来像这样：

Answer 1

这是在 Highstock API 中实现的，请参阅http://api.highcharts.com/highstock#xAxis.crosshair.label。

为了在 Highcharts 中使用它，只需加载 highstock.js 并初始化一个常规的 Highcharts：http: //jsfiddle.net/highcharts/vmyau00g/

            crosshair: {
                label: {
                    enabled: true,
                    padding: 8
                }
            }

Answer 2

这只是一般的想法： http: //jsfiddle.net/r7fdh/ - 您需要添加检查光标是否在绘图内（使用chart.plot[Left/Top/Width/Height]），并且您可能需要使用其他东西event.page[X/Y]来获取位置。

代码：

$("#container").mousemove(move);

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

});

function move(event) {
    var x = event.pageX,
        y = event.pageY,
        path = ['M', chart.plotLeft, y,
            'L', chart.plotLeft + chart.plotWidth, y,
            'M', x, chart.plotTop,
            'L', x, chart.plotTop + chart.plotHeight];

    if (chart.crossLines) {
        // update lines
        chart.crossLines.attr({
            d: path
        });
    } else {
        // draw lines
        chart.crossLines = chart.renderer.path(path).attr({
            'stroke-width': 2,
            stroke: 'green',
            zIndex: 10
        }).add();
    }

    if (chart.crossLabel) {
        // update label
        chart.crossLabel.attr({
            y: y + 6,
            text: chart.yAxis[0].toValue(y).toFixed(2)
        });
    } else {
        // draw label
        chart.crossLabel = chart.renderer.text(chart.yAxis[0].toValue(y).toFixed(2), chart.plotLeft - 40, y + 6).add();
    }
}

Answer 3

默认情况下这是不可能的，但您可以设置鼠标悬停/鼠标事件并使用渲染器添加自定义形状/对象。

http://api.highcharts.com/highcharts#Renderer