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

Posted 2021-05-05

我有一个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

如何在堆叠列中设置块的最小高度？

答案

这似乎是一个错误。你可以在这里报告：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/

另一答案

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

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

我所做的唯一改变就是设置“type：'logarithmic'并删除”min：0“。在处理如此巨大的数字时，我想不出任何其他方法可以实现你正在寻找的东西。

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