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并将一些想法应用到您的代码段中（见下文）。

＆＃13;

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");
//}

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

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

1 个答案: