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

本文介绍了高图热图中的每个单元格边框颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

是否可以为边框指定边距，以使边框完全在单元格的边框内绘制，从而避免边框重叠?还是有某种方法可以通过某些事件来自定义我自己的边框?

您可以在

解决方案

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

示例: jsfiddle/jk9hp3y9/2/

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

正如Halvor所提到的-尚无法设置SVG元素放置在元素内部的边框.

另一种方法可能是扩展Highcharts(与提供的演示类似)，以更改带有边框的单元格的大小，以使其适合与无边框的单元格相同的位置.有关在文档中扩展Highcharts的详细信息.

I'm using highcharts to create a simple heatmap, but now I want to use custom border colors on the cells to represent another dimension in my data set. I am able to accomplish this with the borderColor config option on the data points, but the border of each cell gets drawn partly on top of the border of the preceding cells, so it looks sort of goofy.

Is there a way to specify a margin for the border so that my border gets drawn completely inside the boundary of the cell, so that there is no overlapping of borders? Or is there a way to custom-draw my own border through some event?

You can see this effect in the fiddle at jsfiddle/8ft7e923/1/ and in the image below. Note how the orange border is drawn over the green and the red is drawn over the orange. This overlapping is what I am trying to eliminate.

解决方案

It is possible to add pixel padding for a heatmap series and set borderWidth to double of set padding.

Example: jsfiddle/jk9hp3y9/2/

Example based on your demo: jsfiddle/8ft7e923/2/

As Halvor mentioned - it is not yet possible to set border for SVG elements to be placed inside of element.

Another way could be to extend Highcharts (similar as in provided demos) to change size of cells with border set to make them fit in same place as the ones without border. More about extending Highcharts in Docs.