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

Question

如您所见，第一行和最后一列与其余部分被更大的空间隔开。第一行下方还有一条细的水平灰线。

我怎样才能达到这个结果？

#container {

  min-width: 310px;

  max-width: 800px;

  height: 400px;

  margin: 0 auto

}

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/heatmap.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

Answer 1

您可以使用xAxis.breaks,yAxis.plotLines并Highcharts.SVGRenderer渲染一个覆盖 xAxis 中断点的矩形来实现此结果。检查下面发布的演示和代码。代码：&nbsp; chart: {&nbsp; &nbsp; events: {&nbsp; &nbsp; &nbsp; render: function() {&nbsp; &nbsp; &nbsp; &nbsp; var chart = this,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xAxis = chart.xAxis[0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x = xAxis.toPixels(8.5),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y = chart.plotTop,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width = (xAxis.toPixels(1) - xAxis.toPixels(0.5)) * 0.6,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element;&nbsp; &nbsp; &nbsp; &nbsp; if (chart.customElements) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chart.customElements.forEach(function(elem) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.destroy();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; chart.customElements = [];&nbsp; &nbsp; &nbsp; &nbsp; element = chart.renderer.rect(x, y, width, chart.plotHeight).attr({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill: '#fff',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; zIndex: 100&nbsp; &nbsp; &nbsp; &nbsp; }).add();&nbsp; &nbsp; &nbsp; &nbsp; chart.customElements.push(element);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; xAxis: {&nbsp; &nbsp; breaks: [{&nbsp; &nbsp; &nbsp; breakSize: 0.6,&nbsp; &nbsp; &nbsp; from: 8.5,&nbsp; &nbsp; &nbsp; to: 9&nbsp; &nbsp; }]&nbsp; },&nbsp; yAxis: {&nbsp; &nbsp; plotLines: [{&nbsp; &nbsp; &nbsp; value: 3.5,&nbsp; &nbsp; &nbsp; width: 5,&nbsp; &nbsp; &nbsp; color: '#fff',&nbsp; &nbsp; &nbsp; zIndex: 100&nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; value: 3.5,&nbsp; &nbsp; &nbsp; width: 1,&nbsp; &nbsp; &nbsp; color: '#ccc',&nbsp; &nbsp; &nbsp; zIndex: 101&nbsp; &nbsp; }]&nbsp; }演示：https://jsfiddle.net/BlackLabel/16e3o8jk/API参考：https://api.highcharts.com/highcharts/xAxis.breakshttps://api.highcharts.com/highcharts/yAxis.plotLineshttps://api.highcharts.com/highcharts/chart.events.render