特定のデータの棒グラフの幅を設定できませんHighcharts

Question

これは私を狂ったようにして、私はこの問題を2日で解決しようとしますが成功しません。

私は4 highchairs stackedbarを作成しようとしています。 1行に1つずつ。

各グラフの値に基づいて幅が異なります。例えば

series = [{name: 'Jane',data: [100]}, {name: 'Joe',data: [50]}] 

そうチャート容器のwidthが150（100 + 50）

なければならない私はFiddle

理由でデモを作成した場合3 ^{d th}グラフは1と2のような赤い枠線（ラッパー）に達しませんか？

私は間違っていますか？

これは私のコードです：

$(function() { 

    var template = { 
    chart: { 
     type: 'bar', 
     backgroundColor: null, 
     borderWidth: 0,   
     margin: [0, 0, 0, 0], 
     width: 10, 
     height: 40, 
     style: { 
     overflow: 'visible' 
     }, 
     skipClone: true 
    }, 

    xAxis: { 
     categories: ['Apples'], 
     labels: { 
     enabled: false 
     }, 
     title: { 
     text: null 
     }, 
     lineWidth: 0, 
     minorGridLineWidth: 0, 
     lineColor: 'transparent', 
     minorTickLength: 0, 
     tickLength: 0, 
     startOnTick: false, 
     endOnTick: false, 
     tickPositions: [] 
    }, 
    yAxis: { 
     min: 0, 
    // max:114, 
     gridLineColor: 'transparent', 
     labels: { 
     enabled: false 
     }, 
     title: { 
     text: null 
     } 
    }, 
    exporting: { 
     enabled: false 
    }, 
    title: { 
     text: '' 
    }, 
    credits: { 
     enabled: false 
    }, 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
     stacking: 'normal', 
     borderWidth: 0 
     } 
    }, 
    series: [] 
    }; 

    var ch1 = clone(template); 
    ch1.chart.width = 150; 
    ch1.yAxis.max = 150; 
    ch1.series = [{name: 'Jane',data: [100]}, {name: 'Joe',data: [50]}] 

    var ch2 = clone(template); 
    ch2.chart.width = 100; 
    ch2.yAxis.max = 100; 
    ch2.series = [{name: 'Jane',data: [68]}, {name: 'Joe',data: [32]}] 

    var ch3 = clone(template); 
    ch3.chart.width = 170; 
    ch3.yAxis.max = 170; 
    ch3.series = [{name: 'Jane',data: [20]}, {name: 'Joe',data: [150]}] 

    var ch4 = clone(template); 
    ch4.chart.width = 18; 
    ch4.yAxis.max = 18; 
    ch4.series = [{name: 'Jane',data: [4]}, {name: 'Joe',data: [12]}] 




    $('#container1').highcharts(ch1); 
    $('#container2').highcharts(ch2); 
    $('#container3').highcharts(ch3); 
    $('#container4').highcharts(ch4); 


    function clone(obj) { 
    if(obj == null || typeof(obj) != 'object') 
     return obj;  
    var temp = new obj.constructor(); 
    for(var key in obj) 
     temp[key] = clone(obj[key]);  
    return temp; 
} 
}); 

EDIT

私は問題ではなく、解決策を見つけたと思います。

この値は150であり、それは各目盛りは、一方50

を有するすべての3つのティックを充填する、第二のチャートは値170を有する第一のチャートにおいてsecond demo

あります3ティックを記入して4回目を開始します。

Answer 1

tickIntervalに一致するように軸が延長されているため、最大値を設定したかどうかにかかわらずです。

y軸のラベルを表示すると、その原因がより明確に表示されます。

解決するには、endOnTickとmaxPaddingプロパティを設定し、軸の最大値を設定しないでください。

コード：

yAxis: { 
    endOnTick: false, 
    maxPadding: 0 
} 

例：

• http://jsfiddle.net/jlbriggs/rr14fx8c/1/

出力：