javascript - Highcharts 堆叠条形图边框不显示在右侧

Question

当我创建堆叠条形图时，最右边的“框”没有在右侧绘制边框。

有没有我可以在 Highcharts 中设置的选项或其他内容？强制在下图中的 75% 框周围绘制白色边框线？

这是我用于测试的 jsfiddle 的链接: http://jsfiddle.net/zKgsF/

请注意:将 borderWidth 属性设置为大于 1 可以显示，但最右边的边框比其他边框细得多。请参见下图。

这是图表的 javascript:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar',
            backgroundColor: 'rgba(0,0,0,.3)',
            margin: [15,6,15,15],
        },
        xAxis: {
            categories: ['']
        },
        credits: {
          enabled: false
        },
        yAxis: {
          gridLineColor: "#FF0000",
          labels: 
          {
            align: 'right',
            formatter: function()
            {
              return this.value + "%";
            }
                },
        },
        tooltip: {
                formatter: function() 
          {
                        return "<b>" + this.series.name + '</b>: ' + this.y + ' (' +            Math.round(this.percentage,1) + "%)";
                }
            },
        plotOptions: {
                bar: {
                    animation: false,
                    stacking: 'percent',
                    borderWidth: '1',
                    dataLabels: {
                        enabled: true,
                        color: 'white',
                        formatter: function() {

                            if (this.percentage < 10) 
                            {
                                return ""
                            }
                            else
                            {
                                return Math.round(this.percentage,1) + "%";
                            }
                        },
                        style: {
                            fontSize: '18px'
                        }

                    }
                }
        },
        series: [{
            data: [30]        
        },{
            data: [10]        
        }]
    });
});

编辑:

看起来它与条形图“可堆叠”无关。这可能只是与图表进入最大“y”值轴这一事实有关……如另一个示例所示:http://jsfiddle.net/zKgsF/1/

Answer 1

根据 Cubbuk 的建议，您可以通过添加 yAxis 的 max 值来调整它。

此外，您还可以指定 endOnTick 属性。

 max: 100.1,
 endOnTick: false

API 导航here这里是一个 example .