高图热图中的每单元边框颜色

时间:2016-05-20 14:04:35

标签: javascript highcharts

我正在使用highcharts创建一个简单的热图,但现在我想在单元格上使用自定义边框颜色来表示我的数据集中的另一个维度。我可以使用数据点上的borderColor配置选项来完成此操作,但每个单元格的边框部分地绘制在前面单元格边框的顶部,因此它看起来有点傻。

有没有办法为边框指定边距,以便我的边框完全在单元格的边界内绘制,这样边框没有重叠?或者有没有办法通过某个事件自定义我自己的边框?

您可以在http://jsfiddle.net/8ft7e923/1/和下图中的小提琴中看到此效果。注意如何在绿色上绘制橙色边框,在橙色上绘制红色。这种重叠是我想要消除的。

enter image description here

1 个答案:

答案 0 :(得分:0)

可以为热图系列添加像素填充,并将borderWidth设置为设置填充的两倍。

示例:http://jsfiddle.net/jk9hp3y9/2/

基于您的演示的示例:http://jsfiddle.net/8ft7e923/2/

正如Halvor所说 - 现在还不能将SVG元素的边框设置在元素内部。

另一种方法可能是扩展Highcharts(类似于提供的演示)来改变边框设置的单元格大小,使它们与没有边框的单元格相同。有关extending Highcharts in Docs的更多信息。

相关问题