highcharts，设置堆积柱形图的最小高度？

Posted 2023-03-14

【中文标题】highcharts，设置堆积柱形图的最小高度？

【英文标题】：highcharts, Set minimum height for stacked column chart?

【发布时间】：2017-12-14 20:14:46

【问题描述】：

我有一个 3D 堆积柱形图。 如果数据中存在较大的值，则图表中不会显示较小的值。 正如您在

中看到的那样

http://jsfiddle.net/43pv1a2q/6/

series: [
        name: 'John',
        data: [500, 3, 4, 7, 2], //If change 500 to 5, all blocks will be shown
        stack: 'male'
    , 
        name: 'Joe',
        data: [300, 4, 4, 2, 5], //change 300 to 3
        stack: 'male'
    ,

    
        name: 'Tom',
        data: [500, 3, 4, 7, 2], // change 500 to 5
        stack: 'male'
    ]

minPointLength 适用于条形图，但不适用于堆积柱形图。 https://api.highcharts.com/highcharts/series.columnrange.minPointLength

如何为堆积列中的块设置最小高度？

【参考方案1】：

这似乎是一个错误。你可以在这里举报：https://github.com/highcharts/highcharts/issues

解决方法：

如果原始y 值小于50（阈值），我会使用新值更新每个点，并将原始值保存在realValue 属性中。然后我手动计算tooltip.pointFormatter 中每个堆栈的累积值，以便查看者看到正确的值：

events: 
  load: function() 

    var chart = this,
      minColHeightVal = 50;

    chart.series.forEach(function(s) 
      s.points.forEach(function(p) 

        if (p.y < minColHeightVal) 
          p.update(
            y: minColHeightVal,
            realValue: p.y
          , false);
        
      );
    );

    chart.redraw();

  


// (...)

pointFormatter: function() 
  var stackSum = 0,
    point = this,
    chart = point.series.chart;

  chart.series.forEach(function(s) 
    s.points.forEach(function(p) 
      if (p.x === point.x) 
        stackSum += p.realValue ? p.realValue : p.y
      
    );
  );

  return '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': ' + (point.realValue ? point.realValue : point.y) + ' / ' + stackSum;

现场演示： http://jsfiddle.net/kkulig/j3toufk9/

【参考方案2】：

解决方案可能是将 y 轴设置为类型：对数，如下所示：http://jsfiddle.net/43pv1a2q/8/

yAxis: 
    type: 'logarithmic',
    allowDecimals: false,
    title: 
        text: 'Number of fruits',
        skew3d: true
    
,

我所做的唯一更改是设置“type: 'logarithmic' 并删除“min: 0”。我想不出任何其他方式来实现您在使用如此巨大的不同时所寻找的东西数字。

编辑：当然，您仍然可以使用“min: X”来设置 y 轴上的最小值；我刚刚删除了它，因为当我想要最小默认值时它是不必要的。