Question

有谁知道如何以编程方式显示十字准线？

当我尝试使用chart.tooltip.refresh（point）时，我能够成功显示工具提示但没有十字准线。当我悬停在数据点附近时，我只能看到十字准线。

此外，当您将鼠标悬停在图表区域外时，是否可以防止十字准线消失？

jsfiddle会非常有帮助，谢谢！

Answer 1

您可以捕获mouseOver事件并添加/更新plotLines。

plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function () {
                        var chart = this.series.chart;


                        var x = this.x,
                            y = this.y;
                        if (chart.xAxis[0].plotLinesAndBands.length > 0) {
                            chart.xAxis[0].update({
                                plotLines: [{
                                    id: 'xPlotLine',
                                    value: x,
                                    width: 1,
                                    color: '#C0C0C0'
                                }]
                            });

                            chart.yAxis[0].update({
                                plotLines: [{
                                    id: 'yPlotLine',
                                    value: y,
                                    width: 1,
                                    color: '#C0C0C0'
                                }]
                            });
                        } else {
                            chart.xAxis[0].addPlotLine({
                                id: 'xPlotLine',
                                value: x,
                                width: 1,
                                color: '#C0C0C0'
                            });

                            chart.yAxis[0].addPlotLine({
                                id: 'yPlotLine',
                                value: y,
                                width: 1,
                                color: '#C0C0C0'
                            });
                        }
                    }
                }
            }
        }
    },

示例：http://jsfiddle.net/792rX/3/

Answer 2

To＆＃34;始终显示十字准线＆＃34;你可能想使用情节线。如果只有一个静态点，则可以将其添加到图表的选项中。为了使它看起来与标准网格线完全相同，它看起来像这样：

plotLines: [{
    value: 3,
    width: 1,
    color: '#C0C0C0'
}]

并且会为value和xAxis添加正确的yAxis。请参阅this JSFiddle example。

为了更灵活并在渲染图表后执行此操作，您可以执行以下操作：

function addCrosshair(x,y) {
    chart.xAxis[0].addPlotLine({
        id: 'xPlotLine'+x,
        value: x,
        width: 1,
        color: '#C0C0C0'
    });

    chart.yAxis[0].addPlotLine({
        id: 'yPlotLine'+y,
        value: y,
        width: 1,
        color: '#C0C0C0'
    });
}

function removeCrosshair(x,y) {
    chart.xAxis[0].removePlotLine('xPlotLine'+x);
    chart.yAxis[0].removePlotLine('yPlotLine'+y);
}

利用Axis.addPlotLine和Axis.removePlotLine在渲染时间后管理绘图线。请参阅this JSFiddle example。

Answer 3

你只需要添加这样的十字准线样式：

// Always show crosshair after tooltip hide event
.highcharts-crosshair {
    visibility: visible !important;
}

Highchart - 始终显示十字准线

3 个答案: