Javascript 在Highcharts热图中设置行和列之间的特定间距

如您所见，第一行和最后一列与其余行之间的间隔较大。 第一行下面还有一条细的水平灰线

我怎样才能达到这个结果

Highcharts.chart（'container'{
图表：{
类型：'热图'，
玛金托普：40，
marginBottom:80，
边缘左：300，
marginRight:170，
绘图边框宽度：0，
},
打印选项：{
系列：{}，
热图：{
//所有热图系列的共享选项
边框颜色：'#ffffff'，
边框宽度：100
}
},
标题：{
文本：“”
},
xAxis：{
类别：[一月、二月、三月、四月、六月、七月、八月、九月、十月、十一月]，
相反：是的，
},
亚克斯：{
类别：[“人力资源1”、“人力资源2”、“人力资源3”、“人力资源4”、“人力资源”]，
标题：空，
标签：{
对齐：“左”，
x:-200
},
},
颜色轴：{
数据类：[{
发件人：-1，
至:0,，
颜色：“#中交”，
名称：'不适用'
}, {
起:0,，
致:10,，
颜色：“#4cd093ff”，
名称：“非常低的影响”
}, {
起:0,，
致:20,，
颜色：“#b4e788ff”，
名称：“低影响”
}, {
起:20,，
致:50,，
颜色：“#fff89dff”，
名称：“中等影响”
}, {
起:50,，
致:100,，
颜色：“#ffa271ff”，
名称：“高影响”
}, {
起:100,，
颜色：“#f46160ff”，
名称：“非常高的影响”
}]
},
图例：{
对齐：“右”，
布局：“垂直”，
保证金：0，
垂直排列：“顶部”，
y:25，
正方形符号：false，
项目编号：30，
符号半径：0，
符号高度：40，
符号宽度：5，
是的，
项目样式：{
“颜色”：“333333”，
“光标”：“指针”，
“fontSize”：“12px”，
“textOverflow”：“省略号”
}
},
工具提示：{
格式化程序：函数（）{
返回'In'+this.series.xAxis.categories[this.point.x]+'impact of
'+
this.point.value+'表示'+this.series.yAxis.categories[this.point.y]+''；
}
},
系列：[{
名称：“每位员工的销售额”，
//行大小：0.5，
边界宽度：2，
数据：[
[0, 0, 10],
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[1, 0, 92],
[1, 1, 58],
[1, 2, 78],
[1, 3, 117],
[1, 4, 48],
[2, 0, 35],
[2, 1, 15],
[2, 2, 123],
[2, 3, 64],
[2, 4, 52],
[3, 0, 72],
[3, 1, 132],
[3, 2, 114],
[3, 3, 19],
[3, 4, 16],
[4, 0, 38],
[4, 1, 5],
[4, 2, 8],
[4, 3, 117],
[4, 4, 115],
[5, 0, 88],
[5, 1, 32],
[5, 2, 12],
[5, 3, 6],
[5, 4, 120],
[6, 0, 13],
[6, 1, 44],
[6, 2, 88],
[6, 3, 98],
[6, 4, 96],
[7, 0, 31],
[7, 1, 1],
[7, 2, 82],
[7, 3, 32],
[7, 4, 30],
[8, 0, 85],
[8, 1, 97],
[8, 2, 123],
[8, 3, 64],
[8, 4, 84],
[9, 0, 47],
[9, 1, 114],
[9, 2, 31],
[9, 3, 48],
[9, 4, 91]
],
数据标签：{
启用：false，
颜色：'#000000'
}
}, ]
});
#容器{
最小宽度：310px；
最大宽度：800px；
高度：400px；
保证金：0自动
}
您可以使用
xAxis.breaks
、
yAxis.plotLines
和
Highcharts.svgrender
来渲染覆盖xAxis上的断点的矩形，从而获得此结果。检查下面发布的演示和代码

代码：

  chart: {
    events: {
      render: function() {
        var chart = this,
          xAxis = chart.xAxis[0],
          x = xAxis.toPixels(8.5),
          y = chart.plotTop,
          width = (xAxis.toPixels(1) - xAxis.toPixels(0.5)) * 0.6,
          element;

        if (chart.customElements) {
          chart.customElements.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customElements = [];

        element = chart.renderer.rect(x, y, width, chart.plotHeight).attr({
          fill: '#fff',
          zIndex: 100
        }).add();

        chart.customElements.push(element);
      }
    }
  },
  xAxis: {
    breaks: [{
      breakSize: 0.6,
      from: 8.5,
      to: 9
    }]
  },
  yAxis: {
    plotLines: [{
      value: 3.5,
      width: 5,
      color: '#fff',
      zIndex: 100
    }, {
      value: 3.5,
      width: 1,
      color: '#ccc',
      zIndex: 101
    }]
  }

演示：

  chart: {
    events: {
      render: function() {
        var chart = this,
          xAxis = chart.xAxis[0],
          x = xAxis.toPixels(8.5),
          y = chart.plotTop,
          width = (xAxis.toPixels(1) - xAxis.toPixels(0.5)) * 0.6,
          element;

        if (chart.customElements) {
          chart.customElements.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customElements = [];

        element = chart.renderer.rect(x, y, width, chart.plotHeight).attr({
          fill: '#fff',
          zIndex: 100
        }).add();

        chart.customElements.push(element);
      }
    }
  },
  xAxis: {
    breaks: [{
      breakSize: 0.6,
      from: 8.5,
      to: 9
    }]
  },
  yAxis: {
    plotLines: [{
      value: 3.5,
      width: 5,
      color: '#fff',
      zIndex: 100
    }, {
      value: 3.5,
      width: 1,
      color: '#ccc',
      zIndex: 101
    }]
  }




API参考：

  chart: {
    events: {
      render: function() {
        var chart = this,
          xAxis = chart.xAxis[0],
          x = xAxis.toPixels(8.5),
          y = chart.plotTop,
          width = (xAxis.toPixels(1) - xAxis.toPixels(0.5)) * 0.6,
          element;

        if (chart.customElements) {
          chart.customElements.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customElements = [];

        element = chart.renderer.rect(x, y, width, chart.plotHeight).attr({
          fill: '#fff',
          zIndex: 100
        }).add();

        chart.customElements.push(element);
      }
    }
  },
  xAxis: {
    breaks: [{
      breakSize: 0.6,
      from: 8.5,
      to: 9
    }]
  },
  yAxis: {
    plotLines: [{
      value: 3.5,
      width: 5,
      color: '#fff',
      zIndex: 100
    }, {
      value: 3.5,
      width: 1,
      color: '#ccc',
      zIndex: 101
    }]
  }






这里有一个小把戏：由于highchartsGreat创建svg的方式，我们不确定是否可以进行css攻击！我刚刚调整了z索引（白色条带为5，灰色线为6），这样条带就不会显示在工具提示上方。非常有帮助，非常感谢。