在 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 中断点的矩形来实现此结果。检查下面发布的演示和代码。

代码：

  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

    }]

  }

演示：

https://jsfiddle.net/BlackLabel/16e3o8jk/

API参考：

https://api.highcharts.com/highcharts/xAxis.breaks

https://api.highcharts.com/highcharts/yAxis.plotLines

https://api.highcharts.com/highcharts/chart.events.render