角度高图条形图禁用悬停

Question

我正在使用角度高图，我希望能够选择单堆叠条形图。

我希望能够选择单个堆叠栏或禁用悬停。

我不确定这是否可行，但我找到了自定义代码，可以为每个类别单独选择条形。但我想删除图表的悬停效果，因为悬停效果是每个系列共享的。 https://jsfiddle.net/wvnpd4ze/ 我无法删除它的悬停。

data = [{
    hName: "hh1",
    eaCount: 5,
    neaCount: 12,
    peaCount: 6,
    allAccCount: 23
},

{
    hName: "hh2",
    eaCount: 6,
    neaCount: 6,
    peaCount: 4,
    allAccCount: 14
},

{
    hName: "hh3",
    eaCount: 15,
    neaCount: 9,
    peaCount: 6,
    allAccCount: 30
},
{
    hName: "hh4",
    eaCount: 20,
    neaCount: 12,
    peaCount: 8,
    allAccCount: 40
},
{
    hName: "hh5",
    eaCount: 25,
    neaCount: 15,
    peaCount: 10,
    allAccCount: 50
},
{
    hName: "hh6",
    eaCount: 30,
    neaCount: 18,
    peaCount: 12,
    allAccCount: 60
},
{
    hName: "hh7",
    eaCount: 35,
    neaCount: 21,
    peaCount: 14,
    allAccCount: 70
},
{
    hName: "hh8",
    eaCount: 40,
    neaCount: 24,
    peaCount: 16,
    allAccCount: 80
},
{
    hName: "hh9",
    eaCount: 45,
    neaCount: 27,
    peaCount: 18,
    allAccCount: 90
},
{
    hName: "hh10",
    eaCount: 50,
    neaCount: 30,
    peaCount: 20,
    allAccCount: 100
},
{
    hName: "hh11",
    eaCount: 55,
    neaCount: 33,
    peaCount: 22,
    allAccCount: 110
},
{
    hName: "hh12",
    eaCount: 60,
    neaCount: 36,
    peaCount: 24,
    allAccCount: 120
},
{
    hName: "hh13",
    eaCount: 65,
    neaCount: 39,
    peaCount: 26,
    allAccCount: 130
},
{
    hName: "hh14",
    eaCount: 70,
    neaCount: 42,
    peaCount: 28,
    allAccCount: 140
},
{
    hName: "hh15",
    eaCount: 75,
    neaCount: 45,
    peaCount: 30,
    allAccCount: 150
},
{
    hName: "hh16",
    eaCount: 80,
    neaCount: 48,
    peaCount: 32,
    allAccCount: 160
},
{
    hName: "hh17",
    eaCount: 85,
    neaCount: 51,
    peaCount: 34,
    allAccCount: 170
},
{
    hName: "hh18",
    eaCount: 90,
    neaCount: 54,
    peaCount: 36,
    allAccCount: 180 

},
{
    hName: "hh19",
    eaCount: 95,
    neaCount: 57,
    peaCount: 38,
    allAccCount: 190
},
{
    hName: "hh20",
    eaCount: 100,
    neaCount: 60,
    peaCount: 40,
    allAccCount: 200
}

];

Highcharts.chart('container', {
chart: {
            type: 'bar',
            scrollablePlotArea: {
                minHeight: 800,
                opacity: 0.97
            },
            marginRight: 25
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: data.map(detail => detail.hName),
            title: {
                text: 'hh'
            }
        },
        credits: {
            enabled: false
        },
        yAxis: {
            min: 0,
            tickInterval: 50,
            title: {
                text: 'Number of Acc',
            },
            labels: {
                overflow: 'justify'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        plotOptions: {
            states: {
                hover: {
                    enabled: false,
                    halo: {
                        size: 0
                    }
                }
            },
            series: {
                states: {
                    hover: {
                        enabled: false,
                        halo: {
                            size: 0
                        }
                    }
                },
                stacking: 'normal',
                pointPadding: 0,
                groupPadding: 0.2,
                pointWidth: 30,
                padding: 5,
                point: {
                    events: {
                        click: function () {
                            var clickedPoint = this,
                                chart = clickedPoint.series.chart;
                            chart.series.forEach(function (s) {
                                s.points.forEach(function (p) {
                                    if (p.x == clickedPoint.x) {
                                        p.select(null, true);
                                    }
                                });
                            });
                        }
                    },
                    states: {
                        select: {
                            enabled: false
                        }
                    }
                },

            },
            bar: {
                dataLabels: {
                    enabled: true
                },
                states: {
                        select: {
                            enabled: false
                        }
                    }
            },

        },
        series: [
            {
                name: 'Partial',
                data: data.map(detail => detail.peaCount),
                color: '#523594',
                states: {
                    hover: {
                        enabled: false
                    }
                }
            },
            {
                name: 'Not',
                data: data.map(detail => detail.neaCount),
                color: '#A11D2A',
                states: {
                    hover: {
                        enabled: false
                    }
                }
            },
            {
                name: 'En',
                data: data.map(detail => detail.eaCount),
                color: '#869338',
                states: {
                    hover: {
                        enabled: false
                    }
                }
            },
        ]
});

我尝试在多个地方禁用悬停，但它仍然显示。

Answer 1

要禁用悬停，您需要将 states.hover.enabled 选项设置为 false 并将 states.inactive.opacity 选项设置为 1。

API参考： https://api.highcharts.com/highcharts/plotOptions.series.states.hover.enabled

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

plotOptions: {
series: {
  stacking: 'normal',
  states: {
    hover: {
      enabled: false
    },
    inactive: {
      opacity: 1
    }
  }
}

},