Highcharts xrange 拒绝遵循 HOVER 或 SCROLLBAR 行为

Question

我正在尝试将 xrange 图调整到像图这样的时间轴中，并制作了一个整体很棒的小部件，但我运行遇到了适合和完成的问题。我希望能够有一个 YAxis 滚动条，这样我就可以在同一个图表中显示许多 'Agents'，并且当鼠标悬停在上面时滚动条会变暗。不幸的是，我无法从 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 } },

(link: 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

Highcharts xrange 拒绝遵循 HOVER 或 SCROLLBAR 行为

Highcharts xrange Refusing to follow HOVER or SCROLLBAR behavior

javascript

highcharts

xrange