Question

我使用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>

Answer 1

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

Answer 2

看起来，即使轴（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 个答案: