Highcharts树形图顶部和左侧边框缺失答案

【问题标题】：Highcharts treemap top and left borders missingHighcharts树形图顶部和左侧边框缺失
【发布时间】：2017-09-05 22:40:13
【问题描述】：

我使用 Highcharts 创建了一个树形图，但缺少顶部和左侧边框。我一直在阅读文档，但找不到任何有用的东西。

我创建了一个 Codepen here。您可以看到，在黑色背景下，系列顶部和左侧的边框不可见。我认为他们在那里，但也许图表在 X/Y 上偏移了一个像素或其他东西。

Highcharts.setOptions({
  colors: ['#263542', '#3d4d5d', '#41474d', '#515961', '#292e33', '#24445e'],
  lang: {
    thousandsSep: ','
  }
});

Highcharts.chart('treemap', {
  chart: {
    backgroundColor: 'rgba(255,255,255,0)',
    borderColor: 'rgb(255,255,255)'
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    series: {
      colorByPoint: true,
      borderColor: 'rgb(71, 116, 135)',
      borderWidth: 1,
      dataLabels: {
        enabled: true,
        style: {
          textOutline: 'none',
          fontFamily: 'Roboto',
          fontWeight: '300',
          fontSize: '1rem'
        }
      }
    }
  },
  tooltip: {
    valuePrefix: '£'
  },
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    data: [{
      name: 'Indices',
      value: 230000,
    }, {
      name: 'Forex',
      value: 120000,
    }, {
      name: 'Shares',
      value: 55000,
    }, {
      name: 'Pension',
      value: 55000,
    }, {
      name: 'ISA',
      value: 20000,
    }]
  }],
  title: {
    text: ''
  },
  legend: {
    enabled: false
  }
});

body {
  background: #000;
}

#treemap {
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap"></div>

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

看起来，即使轴（xAxis/yAxis）在树形图中不可见，它们也会通过覆盖边框的左侧和顶部对其产生影响。将offset 属性设置为两个轴中的小值（例如 1）将使它们远离绘图区域，从而发现缺失的边界部分。

API 参考：
http://api.highcharts.com/highcharts/yAxis.offset
http://api.highcharts.com/highcharts/xAxis.opposite

示例：
http://jsfiddle.net/20oh9c3d/

【讨论】：

感谢您的解决方案。默认情况下，Highcharts 的示例树形图缺少边框 - 它们应该实现您的答案！

【解决方案2】：

我还不能发表评论，所以这不是真正的答案。但是我发现如果你将borderWidth 更改为 2，那么边框就会变得可见。对我来说，这表明元素的边距或填充由于某种原因覆盖了元素左上角的边框。希望这可以为您指明某种方向。

【讨论】：