我有一个带有年龄类别的 x 轴(+45， 40， 30 ...0, 5, 10 ...30+(
类别输出以刻度线为中心。到目前为止一切都很好。
但是，第一个和最后一个类别似乎"填充"了绘图区域的左侧和右侧，我找不到任何方法来减少或消除此间距。
y 轴刻度线应针对最左侧区域的垂直边缘设置。同样，在右侧，x 轴应停在"30+"刻度线处。
斯菲德尔
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Total Asset Allocation</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script>
$(function() {
$('#container').highcharts({
"chart": {
renderTo: 'container',
type: 'area',
marginBottom: 150,
events: {
load: function() {
var locator = document.querySelector('.highcharts-exporting-group');
$(locator).append($('.highcharts-plot-lines-0').detach());
this.renderer.rect(this.plotLeft, this.plotSizeY + this.plotTop + 100, this.plotSizeX, 2)
.css({
fill: '#000',
zIndex: 4
}).add();
this.renderer.rect(this.plotSizeX / 16 * 9.5 + this.plotLeft, this.plotSizeY + this.plotTop + 100 - 5, 2, 12)
.css({
fill: '#000',
zIndex: 4
}).add();
this.renderer.text('Years to Retirement', 250, 480)
.css({
fontSize: 15
}).add();
this.renderer.text('Years Past Retirement', 550, 480)
.css({
fontSize: 15
}).add();
this.renderer.text("u25b6", this.chartWidth - 21, 467)
.css({
fontSize: 15
}).add();
this.renderer.text('u2B07', 650, 400)
.css({
fontSize: 10
}).add();
this.renderer.text('MM RetireSMART<br/><span style="color:transparent">...</span>"In Retirement', 615, 414)
.css({
fontSize: 10
}).add();
}
}
},
title: {
text: 'Target Asset Allocation'
},
legend: {
enabled: false
},
xAxis: {
categories: ['45+', 40, 35, 30, 25, 20, 15, 10, 5, 0, 5, 10, 15, 20, 25, '30+'],
tickColor: '#000',
tickWidth: 1,
tickmarkPlacement: 'on',
title: {
enabled: false
},
plotLines: [{
color: '#fff',
width: 5,
visible: true,
value: 9
}]
},
yAxis: {
title: {
text: 'Weighting',
style: {
color: '#000',
fontWeight: 'bold'
}
},
label: {
padding: 50
},
tickmarkPlacement: 'on',
tickInterval: 10,
tickLength: 5,
tickWidth: 1,
tickColor: '#000',
"allowDecimals": false,
gridLineWidth: 0
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#fff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#fff'
}
},
series: {
events: {
afterAnimate: function() {
var label = this.labelBySeries;
label.attr({
'text-anchor': 'middle',
}).css({
color: this.options.labelColor
})
}
},
marker: {
enabled: false
},
}
},
series: [{
useHTML: true,
name: '<span style="color: transparent;">WWWWWWW</span>Other Funds</span>',
color: '#b0b0b0',
label: {
connectorAllowed: true,
onArea: false,
style: {
color: '#fff',
fontSize: 'large'
}
},
data: [2, 3, 3, 4.5, 3, 3, 3, 2, 5, 3.5, 4, 4, 3, 3, 2, 4]
}, {
name: '<span style="color: transparent;">WWW</span>Fixed Income<br><span style="color:transparent;font-size:3px;">W</span><br/><span style="color: transparent;">WWW</span>Funds',
color: '#010101',
label: {
style: {
fontSize: 'large'
}
},
data: [5, 6, 6, 7, 9, 11, 14, 16, 16, 18, 19, 30, 35, 44, 55, 66]
}, {
name: '<span class="EquityFunds">Equity Funds</span><span style="color: transparent;">WW</span>',
color: '#303030',
label: {
style: {
fontSize: 'large'
}
},
data: [95, 99, 98, 97.5, 90, 80, 70, 60, 40, 33, 22, 20, 17, 15, 13, 11]
}],
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 510px; margin: 0 auto"></div>
</body>
</html>
不要忘记category类型轴与其他轴相同的事实，因此，如果您那里有 16 个类别，那么您的轴的极值是0, 15，这就是为什么您只需要定义xAxis.min和xAxis.max值，以使轴范围有点窄， 诸如此类：
xAxis: {
min: 0.5,
max: 14.5
}
此外，请将xAxis.labels.style.textOverflow设置为等于'none'以避免截断最后一个标签文本。
现场示例：https://jsfiddle.net/c1h3rkep/
接口参考：
https://api.highcharts.com/highcharts/xAxis.min
https://api.highcharts.com/highcharts/xAxis.max
https://api.highcharts.com/highcharts/xAxis.labels.style