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>축 (xAxis / yAxis)이 트리 맵 차트에 표시되지 않더라도 테두리의 왼쪽과 상단 부분을 덮음으로써 영향을 미치는 것처럼 보입니다. offset작은 값 (예 : 1)으로 두 축에 속성을 설정하면 플롯 영역에서 멀리 이동하여 누락 된 테두리 부분이 발견됩니다.
API 참조 :
http://api.highcharts.com/highcharts/yAxis.offset
http://api.highcharts.com/highcharts/xAxis.opposite
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다