高图表 - 重绘后设置状态(非活动)不起作用

Question

考虑下面的玩具示例：jsfiddle

chart: {
events: {
render: myfunc
}
},

。

function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}

预期行为是将第一个序列的状态设置为悬停，同时在加载和重绘事件后将所有其他序列设置为非活动状态。

1. 代码在加载后按预期工作
2. 但是，重绘后它不起作用(通过选择框(。在框中选择一个选项后，除非之前已悬停任何系列，否则序列将呈现为正常而不是非活动状态。也就是说，如果您与任何系列交互，然后在框中选择一个选项，则代码有效，但如果在加载后立即在框中选择一个选项而不与系列进行交互，则代码不起作用。

令人惊讶的是，在控制台中进行一些检查后，我注意到在任何情况下，预期状态都正确传递给系列对象。那么，为什么状态没有正确呈现呢？

*注意：在我的实际应用中，悬停系列不一定是第一个，但它会根据其他功能的输出而变化。我知道">myfunc"可以在当前示例中简化，但出于一般目的，请尽可能建议保留基本结构的答案。

Answer 1

这似乎与HighChart的GitHub上的这个问题有关。在您的情况下，HighCharts正在正确更新序列的状态。但是，在呈现时，它无法设置与'inactive'状态关联的正确不透明度值。解决方法是将序列的不透明度显式设置为它在'inactive'状态下应具有的相同值。

// F U N C T I O N   S E T   S T A T E
function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
//explicit opacity
s.opacity = 0.2;
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}

Answer 2

感谢您分享此问题，似乎是上次发布后的回归。

在以前的版本中，它曾经工作正常：https://jsfiddle.net/BlackLabel/Lbpvdwam/

<script src="https://code.highcharts.com/8.1.0/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.0/highcharts-more.js"></script>

我在Highcharts Github问题频道上报告了它，您可以在其中关注此线程：https://github.com/highcharts/highcharts/issues/13719

如果您不需要任何新功能/错误修复，请使用以前的版本作为临时解决方法。