Выделите несколько серий в Highcharts

Question

Я пытаюсь выделить несколько серий в старших чартах.Поведение по умолчанию выделяет только одну серию и уменьшает непрозрачность других серий.Я могу выделить несколько серий, используя setState API, но не могу уменьшить непрозрачность других серий.

Я пытался уменьшить непрозрачность с помощью обновления, но это не работает.Также не нашел ссылки на API.

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button">
click me
</button>

var chart = Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    },
    {
        data: [5, 60, 40, 35, 10, 30, 70, 120, 50, 60, 60, 30]
    }]
});

$('#button').click(function () {

   chart.series[2].update({states: {
                inactive: {
                    opacity: 0.2
                }
            }});

   chart.series[0].setState('hover');
   chart.series[1].setState('hover');

});

https://jsfiddle.net/Humble_Learner/ye5h32d8/2/

Я создал скрипку для того же.Он выделяет серию, которую я хочу выделить, но непрозрачность почему-то не меняется.

Answer 1

Попробуйте использовать setState('inactive')

var chart = Highcharts.chart('container', {
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
      data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    },
    {
      data: [5, 60, 40, 35, 10, 30, 70, 120, 50, 60, 60, 30]
    }
  ]
});

$('#button').click(function() {
  chart.series[2].setState('inactive');
  chart.series[0].setState('hover');
  chart.series[1].setState('hover');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button">
click me
</button>