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