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

Question

我有一个包含两个堆叠系列的图表。此图表为条形图，达到一定数量后变为柱状图。

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

我怎样才能做到这一点？

非常感谢您的帮助。

Answer 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

Answer 2

更新我找到了如何设置 'crosshair' 以及现在如何“保留”它（重置它）。果然是我想要的样子:

初始化：第一项默认激活十字准线悬停效果
将鼠标悬停在另一个项目上
离开图表的焦点（模糊）
然后重新应用第 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
        }
    }
} });

尝试反应式十字准线或 mouseOut（重点）...目前代码非常重复，只是为了让事情正常进行：

$('#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）

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

Highcharts: Set programmatically the crosshair on the first xAxis item

hover

highcharts