我有以下代码来绘制坐标空间（JSBin），我发现Y轴的标题/传说（即x 10000）太靠近Y轴了；我想将其移高一点。如果将yAxis: { title: { y: 0 } }更改为yAxis: { title: { y: -5 } }，它的一部分将被隐藏。也许我们可以将整个系统稍微移到左下角吗？
有没有人有一个好的解决方案？
<!DOCTYPE html>
<html>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:400px;margin:1.5em 1em;"></div>
<script>
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
type:'area'
},
credits: false,
legend: false,
title: { text:"" },
tooltip: {},
plotOptions: {
series: {
color:'rgba(156,156,156,.9)',
fillColor:'#ffffff',
lineWidth:1,
marker: {
enabled:false,
states: {
hover: {
enabled:false
}
}
}
}
},
xAxis: {
tickmarkPlacement:'on',
categories:[-1.7, -1.65, -1.6, -1.55, -1.5, -1.45, -1.4, -1.35, -1.3]
},
yAxis: {
title: { text: "x 10000", rotation: 0, y: 0, x:10, margin: -40, align: 'high'},
tickLength: 10,
tickWidth: 1,
lineWidth: 1,
tickmarkPlacement:'on',
gridLineColor:'#ffffff',
categories:[0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]
},
series:[{
data:[[1,1],[1,3],[2,3],[2,1],[1,1]]
}]
});
</script>
</body>
</html>
最佳答案
我找到了解决方案。您要在此处添加marginTop：
chart: {
renderTo:'container',
type:'area',
marginTop: 30
},
然后，您可以在标题中添加否定位置。 :)
MarginTop基本上将您的绘图区域向下移动，因此顶部有一些空白空间。
https://api.highcharts.com/highcharts/chart.marginTop