Question

我试图在高图表中突出显示多个系列。默认行为仅突出显示一个系列，并减少其他系列的不透明度。我能够使用setState API突出显示多个系列，但无法降低其他系列的不透明度。

我尝试使用update减少不透明度，但这不起作用。找不到任何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>

突出显示Highcharts中的多个系列

1 个答案: