図表の上部で無駄なスペースを最小化するティック位置を最適化する

Question

下のスニペットを実行すると、最初の図では、チャートの上部に多くのスペースが無駄になります。異なる要素の高さで同じチャートを使用すると、スペースをより有効に活用できます。

tickPositionsを最適化して、この無駄なスペースを減らすにはどうすればよいですか？

私は、次のHighchartsプロパティを微調整しようとしました：無駄に

• Ceiling
• Floor
• Min
• Max

。追記として

は、この問題は、この特定のチャートで、このような悩みを抱えている理由はによるものである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

にV3からのアップグレードで私たちに影響を与え始めました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が個々の軸ごとの間隔を計算し、それらを互いにプロットする方法が原因です。

私の他の答えでは、chart属性のためにalignTicks: falseを提案しましたが、それはあなたの例ではちょっと面倒です。また、最初の（明るい色の）系列に明示的にtickIntervalを設定すると、グリッド線の同じ奇数オフセットになります。

シリーズポジション間の差異に異論がない限り、これはうまくいくと便利です。