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;
}
});

修改

我认为我发现了问题但不是解决方案。

这是second demo

在第一张图表中，该值为150，并填充所有3个刻度，其中每个刻度线为50.

另一方面，第二个图表的值为170，填充3个刻度并且从第4个开始。

Answer 1

因为轴是否延伸以匹配tickInterval，无论您是否设置了最大值。

如果您显示y轴标签，您会更清楚地看到原因。

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

代码：

yAxis: {
  endOnTick: false,
  maxPadding: 0
}

示例：

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

输出

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

1 个答案: