将鼠标悬停在 highcharts 中的组列上时，如何仅隐藏该组的列？

Question

默认情况下，悬停会隐藏所有组中的所有其他列。我怎样才能使悬停时仅隐藏该组中的列？我在文档中找到了悬停事件，并获取了列（左上角），但如何用它隐藏它？也许通过 tooltip 以某种方式？

我的 question 原图。

现在如何运作的一个例子：

示例如何：

chart1 = new Highcharts.Chart({
 chart: {
    renderTo: 'chart_1',
    type: 'column',
    height: 350,
 },

 title: {
    text: 'Some text'
 },
 xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
 },
 yAxis: {
    title: {
       text: 'Title y'
    }
 },
 /*tooltip: {
   shared: true,
   split: true,
 },*/
 plotOptions: {
   series: {
            point: {
              events: {
                mouseOver: function() {
                  var chart = this.series.chart;
                  if (!chart.lbl) {
                        chart.lbl = chart.renderer.label('')
                            .attr({
                                padding: 10,
                                r: 10,
                                fill: Highcharts.getOptions().colors[1]
                            })
                            .css({
                                color: '#FFFFFF'
                            })
                            .add();
                    }
                    chart.lbl
                        .show()
                        .attr({
                            text: 'x: ' + this.x + ', y: ' + this.y
                        });
                }
              }
            },
            events: {
                mouseOut: function (){
                    if (this.chart.lbl) {
                        this.chart.lbl.hide();
                    }
                }
            }
        },
        column: {
          groupPadding: 0.1,
          pointPadding: 0.1,
          borderWidth: 0,
          events: {
            mouseOver: function() {
              console.log("1");
            }
          }
        }
 },
 series: [{
    name: 'Dev #1',
    data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
 }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
 }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
 }]
});

.actions, .chart {
    margin: 15px auto;
    width: 820px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart_1" class="chart"></div>

Answer 1

为此，首先您需要将 inactive 系列的 opacity 设置为 1 并禁用 hover.

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

然后，使用mouseOver和mouseOut点事件找到与悬停点具有相同类别的点，并用新的不透明度更新它们。

point: {
    events: {
      mouseOver: function() {
        var point = this,
          chart = point.series.chart,
          allSeries = chart.series,
          category = point.category;
        allSeries.forEach(series => {
          series.points.forEach(point => {
            if (point.category === category) {
              point.update({
                opacity: 0.2
              }, false)
            }
          })
        })
        chart.redraw()
      },
      mouseOut: function() {
        var point = this,
          chart = point.series.chart,
          allSeries = chart.series,
          category = point.category;
        allSeries.forEach(series => {
          series.points.forEach(point => {
            point.update({
              opacity: 1
            }, false)
          })
        })
        chart.redraw()
      }
    }
  }

演示： https://jsfiddle.net/BlackLabel/5Lcn6d8e/

API 参考文献： https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver https://api.highcharts.com/class-reference/Highcharts.Point#update

将鼠标悬停在 highcharts 中的组列上时，如何仅隐藏该组的列？

How to hide only the columns of this group when hovering over a group column in highcharts?

javascript

highcharts