Как в highcharts при наведении на столбик группы скрывать только столбцы этой группы?

Question

По умолчанию при наведении скрываются все прочие столбцы во всех группах. Как сделать так, чтобы при наведении скрывались только столбцы в этой группе? В документации нашёл событие наведения, и получение столбика (слева сверху), но как с помощью него скрывать? Может через tooltip как-то?

Пример как работает сейчас: Пример как надо:

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

 title: {
    text: 'Планы разработчиков по созданию HTML5 игр с помощью разных инструментов(в %)'
 },
 xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
 },
 yAxis: {
    title: {
       text: 'Опрошено'
    }
 },
 /*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

Решение дали на английской версии сайта здесь, но не до конца.

Привожу немного изменённое решение:

Highcharts.chart('chart_1', {
  chart: {
    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'
    }
  },

  plotOptions: {
    series: {
      states: {
        inactive: {
          opacity: 1
        },
        hover: {
          enabled: false
        }
      },
      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 !== this)) {
                  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()
          }
        }
      }
    },
    column: {
      groupPadding: 0.1,
      pointPadding: 0.1,
      borderWidth: 0
    }
  },

  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>

БЛОГ НА HUSL

Как в highcharts при наведении на столбик группы скрывать только столбцы этой группы?

Ответы (1 шт):