4

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

我可以在Highcharts中设置一个选项或其他东西来强制在下图中的 75% 框周围绘制白色边框线吗?

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

问题的图像

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

边框宽度为 5

这是图表的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/

4

1 回答 1

3

正如Cubbuk所建议的,您可以通过添加maxyAxis 的值来调整它。

此外,您也可以指定一个endOnTick属性。

 max: 100.1,
 endOnTick: false

对于 API,请在此处导航这里是一个示例

于 2013-01-09T12:58:41.297 回答