优化勾号位置以最大限度地减少图表顶部的浪费空间

Question

如果您运行下面的代码段，您会注意到在第一个图表中，在图表顶部有很多空间浪费。在不同元素高度的相同图表更好地利用空间。

如何获得Highcharts优化tickPositions以减少浪费的空间？

我试着调整以下Highcharts属性：

• Ceiling
• Floor
• Min
• Max

无济于事。

一点题外话，这个问题开始影响我们从V3升级到V4（最新）

var model1 = { 
 
    "chart": {}, 
 
    "xAxis": { 
 
    "categories": ["2033", "2034", "2035", "2036", "2037", "2038", "2039", "2040", "2041", "2042", "2043", "2044", "2045", "2046", "2047"] 
 
    }, 
 
    "yAxis": [{}, { 
 
    "opposite": true, 
 
    }], 
 
    "series": [{ 
 
    "data": [0, 0, 0, 0.210042, 0.310498, 0.328766, 0.328766, 0.328766, 0.328766, 0.328766, 0.328766, 0.328766, 0.328766, 0.305934, 0], 
 
    "yAxis": 0 
 
    }, { 
 
    "data": [0, 0, 0, 9.652964, 13.575342, 14.328766, 14.328766, 14.328766, 14.328766, 14.328766, 14.328766, 14.328766, 14.123286, 12.757988, 0], 
 
    "yAxis": 1 
 
    }], 
 
}; 
 

 

 
$(function() { 
 
    $('#container1').highcharts(model1); 
 
    $('#container2').highcharts(model1); 
 
}); 
 

 
//function increaseHeight(){ 
 
//$('#container1').height(400); 
 
//console.log("Now resize the window to see the chart change"); 
 
//}

#container1 { 
 
    height: 300px; 
 
} 
 
#container2 { 
 
    height: 400px; 
 
}

<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> 
 

 
<!-- button onclick="increaseHeight()">Resize Chart 1</button --> 
 
<div id="container1"></div> 
 
<div id="container2"></div>

Answer 1

您遇到这样的麻烦与此特定图表的原因是由于Highcharts如何处理双轴。他们可能会很难处理，并且通常可以正常工作的属性，如ceiling,min,max等不能像单轴图表那样工作。

I posted an answer a few weeks back to a similar situation并将一些想法应用于您的代码段（请参阅下文）。

var model1 = { 
 
    "chart": {}, 
 
    "xAxis": { 
 
    "categories": ["2033", "2034", "2035", "2036", "2037", "2038", "2039", "2040", "2041", "2042", "2043", "2044", "2045", "2046", "2047"] 
 
    }, 
 
    "yAxis": [{ 
 
    "startOnTick": false, 
 
    "endOnTick": false, 
 
    "maxPadding": 0, 
 
    "minPadding": 0 
 
    }, { 
 
    "opposite": true, 
 
    "startOnTick": false, 
 
    "endOnTick": false, 
 
    "maxPadding": 0, 
 
    "minPadding": 0 
 
    }], 
 
    "series": [{ 
 
    "data": [0, 0, 0, 0.210042, 0.310498, 0.328766, 0.328766, 0.328766, 0.328766, 0.328766, 0.328766, 0.328766, 0.328766, 0.305934, 0], 
 
    "yAxis": 0 
 
    }, { 
 
    "data": [0, 0, 0, 9.652964, 13.575342, 14.328766, 14.328766, 14.328766, 14.328766, 14.328766, 14.328766, 14.328766, 14.123286, 12.757988, 0], 
 
    "yAxis": 1 
 
    }], 
 
}; 
 

 

 
$(function() { 
 
    $('#container1').highcharts(model1); 
 
    $('#container2').highcharts(model1); 
 
}); 
 

 
//function increaseHeight(){ 
 
//$('#container1').height(400); 
 
//console.log("Now resize the window to see the chart change"); 
 
//}

#container1 { 
 
    height: 300px; 
 
} 
 
#container2 { 
 
    height: 400px; 
 
}

<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> 
 

 
<!-- button onclick="increaseHeight()">Resize Chart 1</button --> 
 
<div id="container1"></div> 
 
<div id="container2"></div>

正如你所看到的， “浪费的空间” 你报不见了。但请注意，两个系列的相对位置在不同容器高度之间确实不同。这是由于Highcharts如何计算每个轴上的间隔并将它们相互绘制在一起。

在我的其他答案中，我建议alignTicks: false为chart属性，但这对您的示例有点麻烦。此外，为第一个（浅色）系列设置明确的tickInterval将导致网格线的相同奇数偏移量。

只要您对系列职位之间的差距没有任何异议，这应该对您有用。