highcharts，设置堆积柱形图的最小高度? [英] highcharts, Set minimum height for stacked column chart?

问题描述

我有一个3D堆叠柱形图.如果数据中有一些较大的值，则较小的值将不会显示在图表中.如您所见

I have a 3D stacked column chart. If there is some larger values in the data, the small values will not be shown in the chart. As you can see in

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

The minPointLength works with bar chart, but not with stacked column chart. https://api.highcharts.com/highcharts/series.columnrange.minPointLength

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

How do you set a minimum height for the block in a stacked column?

推荐答案

这似乎是一个错误.您可以在此处报告: https://github.com/highcharts/highcharts/issues

It seems to be a bug. You can report it here: https://github.com/highcharts/highcharts/issues

解决方法:

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

I update every point using a new value if its original y value is less than 50 (threshold) and save the original value in realValue property. Then I manually compute the cumulative values for every stack in tooltip.pointFormatter so that the viewer sees proper values:

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/

这篇关于highcharts，设置堆积柱形图的最小高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！