Question

enter image description here 我们正在制定一个项目，用于绘制两个国家/地区的销售额。挑战在于，由于我们的原型专注于美国，因此美国的销售总是使所有其他国家相形见绌。我们想要做的是为任何小于0的条设置最小高度，以便用户能够看到所有条形图并知道鼠标悬停在悬停状态上的计数。

我附上了一张图片，展示了美国销售规模如何使得右边国家的销售情况看起来像是0.在大多数情况下，只有美国出现但我们从未在底部展示过一个国家，除非至少有一次销售。

无论如何要定义最小高度，以便始终存在一些条形图？我们尝试添加一个边框，但是在相对于大条形图的销售数量很小的情况下，这种情况不起作用。

谢谢！

Answer 1

是的，您可以使用minPointLength：http://api.highcharts.com/highstock#plotOptions.column.minPointLength

除非这些数据的普通观众习惯于使用对数标度数据，否则以这种方式进行扩展并不是一个好主意。人们将按照它们应该比较条形的长度，并且会对数据产生完全不切实际的印象。

1像素和0像素之间的差异足以表明存在一个值，但在大多数情况下，不足以以任何有意义的方式扭曲数据。

Answer 2

您可以考虑使用对数刻度：

http://www.highcharts.com/demo/line-log-axis

yAxis: {
    type: 'logarithmic'
},

即使一个条形比其他条形条高几个数量级，也可以显示不同的高度。

如果数据真的太小，以至于在您最初绘制时无法看到数据，那么其他任何内容都会使您的数据出现偏差。

Answer 3

我像下面这样解决了这个问题

 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>

试图在HighStock中设置最小高度

3 个答案: