2017-09-05 54 views
0

我使用Highcharts創建了一個樹形圖,但缺少頂部和左邊框。我一直在閱讀文檔,但找不到任何有用的信息。Highcharts treemap top and left borders missing

我已經創建了一個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>

回答

0

看起來,儘管座標軸(xAxis/yAxis)在樹狀圖中不可見,但它們會影響它,方法是覆蓋邊界的左側和頂部。在兩個軸中設置具有較小值(例如1)的offset屬性將使它們遠離繪圖區域,揭示缺失的邊界部分。

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

實施例:
http://jsfiddle.net/20oh9c3d/

+0

感謝您的溶液。默認情況下,來自Highcharts的示例樹形圖缺少邊框 - 它們應該實現您的答案! –

0

我不能評論還,所以這是不是真的和答案。但是我發現如果您將borderWidth更改爲2,則可以看到邊框。對我來說,這表示元素的邊距或填充由於某種原因覆蓋了元素左上部分的邊框。希望這能指出你的某種方向。

相關問題