highcharts - 高图表 - 如何获得全宽的堆叠图？

Question

我创建了一个高图表，但希望拥有与 youtube 类似的投票方式；正面与负面。我的问题是让条形图保持整个宽度，我知道百分比可以解决这个问题，但我想要整数。

http://jsfiddle.net/u6H3b/

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar',
              marginLeft:0             

            },
            title: {
                  text: 'votes'
                  },
              credits: {
            enabled: false
        },


            xAxis: {
                categories: ['Apples'],
                title: {

                    enabled: false 



                }
            },
                         exporting: {
            enabled: false
        },
            yAxis: {
                min: 0,
                max:23,
                title: {
                      enabled: false },
               gridLineColor: '#fff',
               lineColor: '#fff'
            },
            legend: {
                backgroundColor: '#FFFFFF',
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
                series: [{
                name: 'Yes',
                data: [20]
            },{
                name: 'No',
                data: [3]
            }]
        });
    });

Answer 1

一种选择是使用“endOnTick”：

yAxis: {
            endOnTick: false,

http://jsfiddle.net/f3eFd/

如果要显示结束刻度 (23)，还可以添加：

tickInterval:23,

http://jsfiddle.net/bLDpg/

如果你真的想变得花哨，你可以定义你需要的每个刻度。在下面的代码中，它在 0、3 和 23 处打印刻度。

 tickPositioner: function () {
            var positions = [0, 3, 23];
            return positions;
        },

http://jsfiddle.net/aSHz3/

Answer 2

我认为，您需要设置的是endOnTick: falseand maxPadding: 0，请参阅：http: //jsfiddle.net/u6H3b/1/

唯一的问题是没有显示最后一个刻度，如果这对您来说是个问题，请tickPositioner按照 SteveP 的建议使用。