Highcharts Highchart-始终显示十字线

有人知道如何以编程方式显示十字光标吗

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

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

JSFIDLE将非常有用，谢谢

要“始终显示十字线”，可能需要使用绘图线。如果只有一个静态点，您可以将其添加到图表的选项中。要使其与标准网格线完全相同，其外观如下所示：

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

绘图线：[{
价值：3，
宽度：1，
颜色：'#C0'
}]

对于

xAxis

和

yAxis

，将添加正确的

值。看

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

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

function addCrosshair（x，y）{
chart.xAxis[0].addPlotLine({
id:'xPlotLine'+x，
值：x，
宽度：1，
颜色：'#C0'
});
chart.yAxis[0].addPlotLine({
id:'yPlotLine'+y，
值：y，
宽度：1，
颜色：'#C0'
});
}
函数removeCrosshair（x，y）{
chart.xAxis[0].removePlotLine（'xPlotLine'+x）；
chart.yAxis[0].removePlotLine（'yPlotLine'+y）；
}

它利用和在渲染后管理打印线。请参阅。
要“始终显示十字线”，您可能需要使用绘图线。如果只有一个静态点，您可以将其添加到图表的选项中。要使其与标准网格线完全相同，其外观如下所示：

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

绘图线：[{
价值：3，
宽度：1，
颜色：'#C0'
}]

对于
xAxis
和
yAxis
，将添加正确的
值。看

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

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

function addCrosshair（x，y）{
chart.xAxis[0].addPlotLine({
id:'xPlotLine'+x，
值：x，
宽度：1，
颜色：'#C0'
});
chart.yAxis[0].addPlotLine({
id:'yPlotLine'+y，
值：y，
宽度：1，
颜色：'#C0'
});
}
函数removeCrosshair（x，y）{
chart.xAxis[0].removePlotLine（'xPlotLine'+x）；
chart.yAxis[0].removePlotLine（'yPlotLine'+y）；
}

它利用和在渲染后管理打印线。请参阅。
您可以捕获鼠标悬停事件并添加/更新绘图线

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'
                            });
                        }
                    }
                }
            }
        }
    },

示例：
您可以捕获鼠标悬停事件并添加/更新绘图线

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'
                            });
                        }
                    }
                }
            }
        }
    },

示例：
您只需添加十字线样式，如下所示：

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

您只需添加如下十字线样式：

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

你说“总是表现”是什么意思？始终显示所有点的十字线？一点？我想在这一点上，也许情节线是最好的选择。你说的“总是显示”是什么意思？始终显示所有点的十字线？一点？我想在这一点上，也许绘图仪是一种方式。