Highcharts:TreeMap选择状态不起作用

时间:2016-05-10 06:48:32

标签: javascript highcharts highmaps

http://jsfiddle.net/sgrg93/7z6r4gkk/

plotOptions: {
  treemap: {
    allowPointSelect: true,
    states: {
      hover: {
        borderColor: "red"
      }
    }
  }
},

在上面的代码中,我使用了悬停状态,这样当我将鼠标悬停在它们上时,我就可以看到红色边框。此外,当我选择多个树节时,会保留红色边框。

现在我需要的是,只有当我选择树形部分时,才能看到红色边框,并且在悬停时,没有观察到边框的变化。

像这样的东西(不起作用)

plotOptions: {
  treemap: {
    allowPointSelect: true,
    states: {
      select: {     //hover changed to select
        borderColor: "red"  //change color only on select and not on hover
      }
    }
  }
},

有没有办法实现这个目标?

1 个答案:

答案 0 :(得分:1)

要使树形图部分仅在选中时具有红色边框,而不是悬停状态,请尝试以下操作:

plotOptions: {
    treemap: {
        allowPointSelect: true,
        point: {
            events: {
                select: function () {
                    this.update({
                        borderColor: 'red', borderWidth: 4
                    });                
                }
            }
        }
    }
}

您在这里做的是为您的点设置select事件(树形图中您希望用户选择的项目),然后要求它更新边框颜色和宽度(我添加了宽度)只是为了更好地说明变化。)

以下是您可以查看的修改过的小提琴:http://jsfiddle.net/brightmatrix/7z6r4gkk/5/

我希望这对你有所帮助!