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

Question

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

我想突出显示第一个项目(与鼠标悬停效果相同，但没有显示工具提示(。因此，第一个项目将有一个与鼠标悬停效果完全相同的框(highchart称之为"十字光标"(。

我怎样才能做到这一点？

非常感谢你的帮助。

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

UPDATE我找到了如何设置"十字线"，现在又找到了如何"；保持"；它(重置它(。事实上，我想要的是：

1. 初始化：第一个项目默认激活十字光标悬停效果
2. 将鼠标悬停在另一个项目上
3. 离开图表的焦点(模糊(
4. 然后重新应用步骤#1

在第一个x轴项目上设置十字线：

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

尝试反应十字光标你鼠标离开(点(。。。目前，代码是完全重复的，只是为了让thins工作：

$('#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); 
}
});

此处为工作样本(无jQuery(