Konnte die Balkendiagrammbreite für spezifische Daten nicht einstellen, Highcharts

Question

Es macht mich gerade verrückt und ich versuche, dieses Problem 2 Tage aber keinen Erfolg zu lösen.

Ich versuche, 4 highchairs stackedbar zu erstellen. Jeweils pro Zeile.

Jedes Diagramm hat eine unterschiedliche Breite basierend auf dem Wert.

Zum Beispiel, wenn

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

so sollte die width von Planbehälter 150 (100 + 50)

I

Warum die in Fiddle erstellt die Demo sein 3 ^d und 4 ^th Diagramm nicht erreichen roten Rand (Wrapper) wie 1 und 2?

Was mache ich falsch?

Dies ist mein Code:

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

Ich glaube, ich fand das Problem aber nicht die Lösung.

Dies a der Wert 150 second demo

Im ersten Diagramm ist, bestimmt und alle 3 Ticks füllen, wobei jedes Häkchen 50.

Auf der anderen Seite hat, hat das zweite Diagramm Wert 170 und füllen Sie 3 Ticks und starten Sie 4..

Answer 1

Da die Achse erweitert, um die tickInterval übereinstimmen, ob Sie einen maximalen Wert festlegen oder nicht.

Wenn Sie Ihre Y-Achsenbeschriftungen anzeigen, sehen Sie die Ursache deutlicher. Geben Sie die endOnTick und maxPadding Eigenschaften ein und überspringen Sie das Einstellen der max. Achse.

Code:

yAxis: { 
    endOnTick: false, 
    maxPadding: 0 
} 

Beispiel:

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

Ausgang: