Невозможно установить ширину гистограммы для конкретных данных, Highcharts

Question

Это просто заставляет меня сходить с ума, и я пытаюсь решить эту проблему 2 дня, но не удался.

Я пытаюсь создать 4 highchairs stackedbar. Каждый по одной строке.

Каждый график имеет разную ширину, основанную на значении.

Например, если

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

так width из диаграммы контейнера должна быть 150 (100 + 50)

Я создал демо в Fiddle

Почему 3 ^d и 4 ^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

Я думаю, что я нашел эту проблему, но не решение.

Это second demo

В первом графике значение равно 150 и заполнить все 3 тиков, где каждый тик имеет 50.

С другой стороны, вторая диаграмма имеет значение 170 и заполнить 3 тика и начать 4-й.

Answer 1

Поскольку ось простирается до tickInterval, задано ли максимальное значение.

Если вы показываете свои метки оси y, вы увидите причину более четко.

Чтобы решить, установите свойства endOnTick и maxPadding и пропустите настройку оси max.

Код:

yAxis: { 
    endOnTick: false, 
    maxPadding: 0 
} 

Пример:

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

Выход: