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

Highcharts xrange拒绝遵循HOVER或SCROLLBAR行为

1 个答案: