Highcharts: Stacked Column increase borderWidth on select state

问题

http://jsfiddle.net/sgrg93/4d08tj96/3/

plotOptions: {
  column: {
    allowPointSelect: true,
    stacking: 'normal',
    borderWidth: 8,      //This is giving spaces in between which I want to avoid
    dataLabels: {
      enabled: true,
      color: 'white',
      style: {
        textShadow: '0 0 3px black'
      }
    },
    states: {
      select: {
        color: null,
        borderWidth: 8,      //border width should increase on select
        borderColor: 'rgba(0,0,0,0.4)'
      }
    }
  }
}

In the above fiddle, I have defined the select states for the stacks. There are spaces between the stacks because of borderWidth: 8 and default borderColor : '#FFFFFF'. I don't want the spaces between the stacks initially (i.e. without doing any selection) and the borderWidth should increase only when I select any stack. Is there any way to achieve this?

回答1:

This seems like a tricky one. I tested out a few different configurations based on some questions I found elsewhere on Stack Overflow (see below), and it seems you can do the following:

If you change "states" to "events," you can have the border size change on the "mouseOver" and "mouseOut" states, but not for the "select" state.

events: {
    mouseOver: function () {
       this.update({
          borderWidth: 8
       });                
   },
   mouseOut: function () {
       this.update({
           borderWidth: 0
       }); 
   }}
}

If you change "select" to "hover" in your "states" clause, you can change the border color (borderColor) if you have the width defined elsewhere, but you can't change the width (using borderWidth).

Here are the questions I referenced for this response:

Highcharts: changing color on hover ranking chart
Highcharts Change column color on hover

I know this doesn't precisely solve your issue, but I hope the information I found will be helpful for you.

来源：https://stackoverflow.com/questions/36930997/highcharts-stacked-column-increase-borderwidth-on-select-state

标签

javascript

Highcharts