Highcharts xrange 拒绝遵循 HOVER 或 SCROLLBAR 行为

Question

我正在尝试将 xrange 图表按摩到类似图表的时间线中，并制作了一个整体很棒的小部件，但我遇到了 Fit and Finish 的问题。我希望能够有一个 YAxis 滚动条，这样我就可以在同一个图表中显示许多“代理”，并且在悬停时让条变暗。不幸的是，我无法从 Highcharts API 中获取任何属性来实际执行任何操作 - 我在使用他们提供给您的 jsFiddle 时遇到了同样的问题。请参阅有关 yAxis 和悬停状态的代码片段。 yAxis: { title: { text: '' }, minPadding: .11, scrollbar: { //todo not working - enabled: true, showFull: true }, categories: ['Prototyping', 'Development', 'Testing', 'a', 'b', 'c', 'd', 'e', 'f', 'g'], reversed: true },... states: { hover: { enabled: true, brightness: -0.9 //todo not working WTF } },

（链接：https://jsfiddle.net/uaqp5tj7/16/#&togetherjs=uufALv7hEj）

如果你有任何想法，请告诉我

Answer 1

首先，您不应该同时使用highcharts.js 和highstock.js 脚本，只使用highstock 并且滚动条会起作用。

要根据需要调整滚动条，您应该设置轴极值，而不是图表高度：

yAxis: {
    min: 0,
    max: 2,
    ...
},

要实现点hover效果，可以使用mouseOver和mouseOut事件：

series: [{
    point: {
        events: {
            mouseOver: function() {
                this.graphic.element.children[0].setAttribute(
                    'opacity', '0.5'
                );
            },
            mouseOut: function() {
                this.graphic.element.children[0].setAttribute(
                    'opacity', '1'
                );
            }
        }
    },
    ...
}]

现场演示：https://jsfiddle.net/BlackLabel/L9rx0vbg/

API 参考：https://api.highcharts.com/highstock/yAxis