Javascript 无法为特定数据设置条形图宽度，Highcharts

它只是让我发疯，我试图解决这个问题2天，但没有成功

我尝试创建4个。每行每行

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

例如，如果

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

因此图表容器的

宽度应为
150
（100+50）

我创建了一个演示


为什么3d和第四张图表没有像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;
}
});

编辑

我想我找到了问题，但没有找到解决办法

这是一个


在第一个图表中，值为150，它填充了所有3个刻度，其中每个刻度有50个

另一方面，第二个图表的值为170，填充3个刻度，从第4个开始
 因为轴延伸以匹配
滴答声间隔
，无论您是否设置了最大值

如果显示y轴标签，则可以更清楚地看到原因

要解决此问题，请设置
endOnTick
和
maxPadding
属性，并跳过设置轴最大值

代码：

yAxis: {
  endOnTick: false,
  maxPadding: 0
}

示例：




输出：

yAxis: {
  endOnTick: false,
  maxPadding: 0
}

因为轴延伸以匹配
滴答声间隔，无论您是否设置了最大值

如果显示y轴标签，则可以更清楚地看到原因

要解决此问题，请设置
endOnTick
和
maxPadding
属性，并跳过设置轴最大值

代码：

yAxis: {
  endOnTick: false,
  maxPadding: 0
}

示例：




输出：

yAxis: {
  endOnTick: false,
  maxPadding: 0
}

是啊，天哪，你是我的英雄：）当你知道如何解决问题时，这是多么容易啊it@snaggs当然，把这些都放在一张图表里，似乎可以让事情变得简单得多。我假设你做的比示例中明显的要多，但也许它仍然可以简化？每个图表（条形图）都用额外的数据包装，所以我无法将所有内容都放在一个图表中（哎呀，天哪，你是我的英雄：）当你知道如何解决问题时，这很容易it@snaggs当然，把这些都放在一张图表里，似乎可以让事情变得简单得多。我假设您所做的比示例中明显的要多，但也许它仍然可以简化？每个图表（条形图）都由附加数据包装，因此我无法将所有数据放在一个图表中