Highcharts在懸停時調暗未選中的酒吧顏色

Question

當我將光標懸停在單個酒吧時，我需要將未選中的酒吧調成堆疊列（Highcharts）。

當前代碼：

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-percent/

Highcharts.chart('container', { 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Stacked column chart' 
    }, 
    xAxis: { 
     categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Total fruit consumption' 
     } 
    }, 
    tooltip: { 
     pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>', 
     shared: true 
    }, 
    plotOptions: { 
     column: { 
      stacking: 'percent' 
     } 
    }, 
    series: [{ 
     name: 'John', 
     data: [5, 3, 4, 7, 2] 
    }, { 
     name: 'Jane', 
     data: [2, 2, 3, 2, 1] 
    }, { 
     name: 'Joe', 
     data: [3, 4, 4, 2, 5] 
    }] 
}); 

Answer 1

爲了改變alpha參數，您可以使用Highcharts.Color對象和方法brighten(Number: alpha)。

定義一系列選項如下

plotOptions: { 
    column: { 
    stacking: 'percent', 
    stickyTracking: false, 
    states: { 
     hover: { 
     enabled: false 
     } 
    }, 
    point: { 
     events: { 
     mouseOver: updateStackColor(0.2), // brighten/dim color 
     mouseOut: updateStackColor(0) // recover original color 
     } 
    } 
    } 
}, 

功能改變堆棧的顏色可以是這樣的：

function updateStackColor(alpha) { 
    return function() { 
    const x = this.x 
    const color = Highcharts.color 
    const colors = Highcharts.getOptions().colors 

    this.series.chart.series.forEach((series, i) => { 
     series.data.forEach(point => { 
     const basePointColor = color(colors[i]) 

     point.update({ 
      color: alpha === 0 
      ? basePointColor.get() // set original color 
      : point.x === x 
       ? basePointColor.brighten(alpha).get() // brighten original color 
       : basePointColor.brighten(-alpha).get() // dim orignal color 
     }, false) 
     }) 
    }) 

    this.series.chart.redraw(false) 
    } 
} 

例如：http://jsfiddle.net/2f5n3ve3/