highcharts,设置堆积柱形图的最小高度?

时间:2017-12-14 20:14:46

标签: highcharts

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

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

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

解决方案可能是将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轴的最小值;我刚删除它,因为当我想要最小值默认时,它是不必要的。