4

スタッキング棒グラフを作成すると、右端の「ボックス」の右側に境界線が描画されません。

下の画像の75％ボックスの周りに白い境界線を強制的に描画するために、 Highchartsで設定できるオプションなどはありますか？

これが私がテストに使用したjsfiddleへのリンクです：http： //jsfiddle.net/zKgsF/

問題の画像

注意：borderWidthプロパティを1より大きい値に設定すると、表示に使用できますが、右端の境界線は他の境界線よりもはるかに薄くなります。下の画像を参照してください。

borderWidthを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 に答える