Highchart 树状图顶部和左侧边框缺失

debugcn 发表于 Dev

dom_ahdigital

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

我在这里创建了一个 Codepen 。您可以看到，在黑色背景下，系列顶部和左侧的边框不可见。我认为它们在那里，但也许图表在 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>

pawel_d

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。