我们正在开展一个项目，该项目可以绘制两组每个国家/地区的销售额图表。挑战在于，由于我们的原型专注于美国，因此在美国的销售量总是让所有其他国家都相形见绌。我们想要做的是为大于 0 的任何条设置最小高度，以便用户能够看到所有条并知道将鼠标悬停在悬停状态的计数。
我附上了一张图片，以显示美国的销售规模如何使右侧国家/地区的销售额看起来像 0。在大多数情况下，只有美国出现，但我们永远不会在底部显示一个国家，除非有至少 1 次销售。
无论如何要定义一个最小高度，以便始终存在一些条？我们尝试添加边框，但在销售量相对于大条形图如此小的情况下不起作用。
谢谢！
是的，您可以使用 minPointLength：http ://api.highcharts.com/highstock#plotOptions.column.minPointLength
除非这些数据的普通查看者习惯于使用对数缩放的数据，否则以这种方式缩放它不是一个好主意。人们会按他们应该的方式比较条形的长度，并且会对数据产生完全不切实际的印象。
在大多数情况下，1 像素和 0 像素之间的差异足以表明存在一个值，但不足以以任何有意义的方式扭曲数据。
您可以考虑的一件事是使用对数刻度：
http://www.highcharts.com/demo/line-log-axis
yAxis: {
type: 'logarithmic'
},
即使一个条比其他条大几个数量级，这也可以让您可视化不同的高度。
如果它真的太小以至于在您最初绘制它时看不到它，那么其他任何东西都会扭曲您的数据。
我解决了这个问题，如下所示
events: {
load: function(event) {
// Following code is added to make tiny stack visible
var chart = this;
var totalValue = 82870; // Sum of all stacks
var minimumPercentageValue = 0.8;
this.series.forEach(function(series) {
series.points.forEach(function(point) {
var valueInPercentage = (point.y * 100) / totalValue;
if (valueInPercentage < minimumPercentageValue) {
point.update({
y: ((minimumPercentageValue+valueInPercentage)*totalValue)/100,
realValue: point.y
}, false);
}
});
});
this.redraw();
}
}
var chart = Highcharts.chart('chart-container', {
credits: false,
chart: {
type: 'bar',
animation:false,
height:200,
events: {
load: function(event) {
// Following code is added to make tiny stack visible
var chart = this;
var totalValue = 82870; // Sum of all stacks
var minimumPercentageValue = 0.8;
this.series.forEach(function(series) {
series.points.forEach(function(point) {
var valueInPercentage = (point.y * 100) / totalValue;
if (valueInPercentage < minimumPercentageValue) {
point.update({
y: ((minimumPercentageValue+valueInPercentage)*totalValue)/100,
realValue: point.y
}, false);
}
});
});
this.redraw();
}
}
},
title:{
text:"Shifts"
},
xAxis: {
visible:false,
endOnTick:false,
categories: ['Shifts'],
},
yAxis: {
endOnTick:false,
visible:false,
max: 82870,
},
legend: {
reversed: true,
align: 'left',
padding:0,
itemPaddingBottom:15,
itemMarginBottom:5,
symbolRadius:0,
verticalAlign: 'bottom',
floating: true,
itemMarginBottom:5,
useHTML: true,
labelFormatter: function (params) {
return '<div><div>'+this.name+'</div><div style="font-weight:normal">'+this.userOptions.start_time+'</div><div style="font-weight:normal">'+this.userOptions.end_time+'</div></div>';
}
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 50,
pointPlacement:'on',
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1
},
marker: {
enabled: false
}
}
},
},
series: [{"name":"Shift 1","start_time":"12\/06\/2019 05:46:47 PM","end_time":"13\/06\/2019 02:47:46 PM","data":[75659]},{"name":"Break","start_time":"03\/06\/2019 03:42:11 PM","end_time":"03\/06\/2019 03:42:31 PM","data":[20]},{"name":"Shift 2","start_time":"03\/06\/2019 03:41:39 PM","end_time":"03\/06\/2019 03:42:11 PM","data":[32]},{"name":"Shift 3","start_time":"29\/05\/2019 08:17:32 PM","end_time":"29\/05\/2019 10:14:43 PM","data":[7031]},{"name":"Shift 4","start_time":"29\/05\/2019 08:16:32 PM","end_time":"29\/05\/2019 08:17:32 PM","data":[60]},{"name":"Shift 5","start_time":"29\/05\/2019 08:15:24 PM","end_time":"29\/05\/2019 08:16:32 PM","data":[68]}],
});<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart-container" style="height:400px; width:100%" ></div>