Highcharts：叠加列增加选择状态的边框宽度 [英] Highcharts: Stacked Column increase borderWidth on select state

问题描述

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

  plotOptions：{
列：{
 allowPointSelect：true，$ b $堆叠：'normal'，
 borderWidth：8，//这里给出了我想要避免
 dataLabels的空格：{
 enabled：true，
 color：'white'，
 style ：{
 textShadow：'0 0 3px black'
} 
}，
 states：{
 select：{
 color：null，
 borderWidth：8，//选择
时边框宽度应增加borderColor：'rgba（0,0,0,0.4）'
} 
} 
} 
 } 
  

在上面的小提琴中，我定义了堆栈的选择状态。由于borderWidth：8和默认的borderColor：'#FFFFFF'，堆栈之间有空格。我最初不希望堆栈之间存在空格（即没有进行任何选择），只有在选择任何堆栈时borderWidth才会增加。有没有什么办法可以达到这个目的呢？

解决方案

这似乎是一个棘手的问题。我测试了一些基于堆栈溢出（见下文）其他地方发现的一些问题的不同配置，看起来您可以执行以下操作：

• 如果您将州更改为事件，则可以在mouseOver和mouseOut状态中更改边框大小，但不能用于选择状态。

    events：{
   mouseOver：function（）{
   this.update（{
   borderWidth：8 
  }）; 
  }，
   mouseOut：function（）{
   this.update（{
   borderWidth：0 
  }）; 
  }} 
  } 
    




• 将悬停在状态子句中，如果您在其他位置定义了宽度，则可以更改边框颜色（ borderColor ），但不能更改宽度 borderWidth ）。

以下是我引用的问题此回应：

• Highcharts：改变悬停排行榜上的颜色 Highcharts在悬停时更改列颜色

我知道这并不完全正确解决你的问题，但我希望我找到的信息对你有帮助。

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?

解决方案

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.

这篇关于Highcharts：叠加列增加选择状态的边框宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！