Highcharts：以编程方式设置第一个 xAxis 项上的十字准线答案

【问题标题】：Highcharts: Set programmatically the crosshair on the first xAxis itemHighcharts：以编程方式设置第一个 xAxis 项上的十字准线
【发布时间】：2021-06-17 09:59:23
【问题描述】：

我有一个包含两个堆叠系列的图表。此图表是条形图，当达到一定数量的项目时会变为柱形图。

我想突出显示第一项（与鼠标悬停效果相同，但不显示工具提示）。所以第一项会有一个与鼠标悬停效果完全相同的框（highchart 称之为“十字准线”）。

我怎样才能做到这一点？

非常感谢您的帮助。

【问题讨论】：

标签： highcharts hover

【解决方案1】：

您只需要在第一点致电setState('hover')：

    chart: {
        ...,
        events: {
            load: function() {
                this.series[0].points[0].setState('hover');
            }
        }
    }

现场演示： http://jsfiddle.net/BlackLabel/3vr9k8tx/

API 参考： https://api.highcharts.com/class-reference/Highcharts.Point#setState

【讨论】：

谢谢，实际上我想要设置的不是“悬停”而是“十字准线”。与此同时，我找到了它，但还不满意。请参阅下面的答案。
嗨@pti_jul，我看不出在这个例子中使用你的代码有什么影响：jsfiddle.net/BlackLabel/nbj9egwL你能更新这个例子来显示你当前的状态吗？
嗨@ppotaczek，我已经用一个示例演示更新了我的答案，我更新了我的解决方案以满足我的需求。 “悬停”状态不是我想要的（我的工具提示系列是共享的，因此悬停突出显示不方便 + 需要用户操作。我需要在加载时直接应用此突出显示而无需任何操作

【解决方案2】：

更新我找到了如何设置“十字准线”以及如何“保留”它（重置它）。确实，我想要的：

初始化：默认情况下，第一项具有此十字准线悬停效果
将鼠标悬停在另一个项目上
离开图表的焦点（模糊）
然后重新应用步骤 #1

在第一个 xAxis 项目上设置十字准线：

let myChart= Highcharts.chart('myContainer', {
data: {
    table: $sourceTableId,
    endColumn : 2
},
chart: {
    type: $nbItems >= 1 + $nbBenchmarks + 5 ? 'bar' : 'column',
    events: {
        'load': function() {
            if (this.series[0].data.length > 0) {
                let points = [],
                    series = this.series;

                // Setting points to be selected
                for (let i = 0; i < series.length; i++) {
                    points.push(series[i].data[0]);
                }
                this.xAxis[0].drawCrosshair(null, points[1]); // Show the crosshair
            }
        }
    }
},
yAxis:{        
    stackLabels: {
        enabled: true,
        formatter: function() {
            return  Highcharts.numberFormat(this.total, 1);
        }
    },
    reversedStacks: false
},
plotOptions: {
    column: {
        stacking: 'normal', // for mode : column
        dataLabels: {       // for mode : column
            enabled: true
        }
    },
    series: {
        stacking: 'normal', // for mode : bar
        dataLabels: {       // for mode : bar
            enabled: true
        }
    }
} });

尝试响应式十字准线 ou mouseOut (of the point)...目前代码完全重复只是为了使薄工作：

$('#myContainer').mouseleave(function() {
        let chart = myChart;

        if (chart.series[0].data.length > 0) {
            let points = [],
                series = chart.series;

            // Setting points to be selected
            for (let i = 0; i < series.length; i++) {
                points.push(series[i].data[0]);
            }

            // timeout is necessary to let finish
            setTimeout(function() {
                // Show the crosshair
                chart.xAxis[0].drawCrosshair(null, points[0])
            }, 0); 
        }
    });

工作示例here（无 jQuery）

【讨论】：