javascript - 无法设置特定数据的条形图宽度，Highcharts

Question

这让我抓狂，我尝试解决这个问题 2 天但没有成功。

我尝试创建 4 highchairs stackedbar 。每个都在每行上。

每个图表根据值有不同的宽度。

例如，如果

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

因此图表容器的宽度应为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;
}
});

编辑

我认为我找到了问题，但没有找到解决方案。

这是一个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/

输出: