highcharts：当我同时使用两个图表时，禁用柱形图上的悬停

Question

悬停在空白处之前

悬停在空白处后

它由两个同步图表组成。 当我将鼠标移到空白处时，底部图表变得模糊。我不希望悬停时发生任何事情。 我在互联网上搜索了很多关于“不活动”和“悬停”为“假”的信息，但是……但没有。

这是我的图表信息：

Highcharts.chart('stock-trading-process', {
                title: {
                    text: ''
                },
                tooltip: {
                    enabled: false
                },
                xAxis: {
                    labels: {
                        enabled: false
                    },
                    visible: false
                },
                chart: {
                    backgroundColor: 'gray',
                    margin: [0, 0, 0, 0]
                },
                yAxis: [{
                    gridLineWidth: 0,
                    title: {
                        text: ''
                    },
                    labels: {
                        enabled: false
                    },
                    height: '50%',
                    lineWidth: 2,
                }, {
                    gridLineWidth: 0,
                    labels: {
                        enabled: false
                    },
                    title: {
                        text: ''
                    },
                    top: '50%',
                    height: '50%',
                    offset: 0,
                    lineWidth: 2
                }],
                series: [{
                    type: 'line',
                    showInLegend: false,
                    color: '#00B1FC',
                    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1, 1],
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: false
                            },
                            inactive: {
                                opacity: 1
                            }
                        }
                    },
                    states: { hover: 'none' },
                    fillColor: '#F7F8FA'
                }, {
                    type: 'column',
                    color: '#94E3FD',
                    pointWidth: 1,
                    showInLegend: false,
                    marker: {
                        enabled: true,
                        states: {
                            hover: {
                                enabled: true
                            },
                            inactive: {
                                opacity: 1
                            }
                        }
                    },
                    data: [1, 8, 6, 7, 4, 5, 9, 3, 2, 1, 7, 8, 5, 1, 2, 5, 9],
                    yAxis: 1,
                    states: { hover: 'none' }
                }],
                exporting: {
                    enabled: true
                },
                credits: {
                    enabled: false
                },
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                }
            });

Answer 1

据我了解 - 将 series 对象上的 states.inactive.opacity 设置为 1 是您正在寻找的解决方案。

states: {
    inactive: {
      opacity: 1
    }
},

演示：https://jsfiddle.net/BlackLabel/en5j4v31/

API：https://api.highcharts.com/highcharts/series.line.states.inactive.opacity

我说得对吗？如果没有，您能更准确地描述一下您的想法吗？

Answer 2

为什么它对我不起作用？

演示：https://jsfiddle.net/3uzfqs4m/

{
        yAxis: [{
            visible: false,
            gridLineWidth: 0,
            title: {
                text: ''
            },
            labels: {
                enabled: false
            },
            height: '50%',
            lineWidth: 2,
        }, {
            visible: false,
            gridLineWidth: 0,
            labels: {
                enabled: false
            },
            title: {
                text: ''
            },
            top: '50%',
            height: '50%',
            offset: 0,
            lineWidth: 2
        }],
        series: [{
            type: 'line',
            showInLegend: false,
            color: '#00B1FC',
            data: [50, 15, 8, 25, 84, 74, 26, 54, 29, 35, 9, 15, 17, 18, 54, 26, 34, 27, 26, 18, 57, 24, 35, 16, 24, 25, 27],
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: false
                    },
                    inactive: {
                        opacity: 1
                    }
                }
            },
            states: {
                inactive: {
                  opacity: 1
              }
            },
            states: { hover: 'none' },
            fillColor: '#F7F8FA'
        }, {
            type: 'column',
            color: '#94E3FD',
            pointWidth: 1,
            showInLegend: false,
            marker: {
                enabled: true,
                states: {
                    hover: {
                        enabled: true
                    },
                    inactive: {
                        opacity: 1
                    }
                }
            },
            states: {
                inactive: {
                  opacity: 1
              }
            },
            data: [50, 15, 8, 25, 84, 74, 26, 54, 29, 35, 9, 15, 17, 18, 54, 26, 34, 27, 26, 18, 57, 24, 35, 16, 24, 25, 27],
            yAxis: 1,
            states: { hover: 'none' }
        }],
        chart: {
            backgroundColor: '#F4F7FA',
            margin: [0, -5, 0, -5]
        },
        title: {
            text: ''
        },
        tooltip: {
            enabled: false
        },
        xAxis: {
            labels: {
                enabled: false
            },
            visible: false
        },
        exporting: {
            enabled: true
        },
        credits: {
            enabled: false
        },
        navigation: {
            buttonOptions: {
                enabled: false
            }
        }
    }

Answer 3

你成功了吗？我也有同样的问题