Right align bars JQPlot

问题

I have produced the following graph using jqPlot, however for some reason the bars start in the middle of the xAxis.

I need to move them to the right, i've looked at the docs and couldn't work it out. any suggestions?

$(document).ready(function(){   
    var ok_before = [4, 3, 1, 0];
    var ok_bars = [3, 4, 5, 4];
    var ok_after = [1, 1, 2, 4];

    var err_before = [5, 0, 2, 0];
    var err_bars = [1, 0, 2, 0];
    var err_after = [2, 8, 4, 8];

    var dateticks = [['2014-01-01' ], ['2014-01-02' ], ['2014-01-03' ], ['2014-01-04' ], ['2014-01-05'], ['2014-01-06'], ['2014-01-07'], ['2014-01-08']];
    var xaxis2ticks = ['We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We']
    var yvals = ['WO1028', 'WO1026', 'WO1025', 'WO1024'];

    plot1 = $.jqplot('chart3', [ok_before, ok_bars, ok_after], {
        animate: true, animateReplot: true,
        series:{
            renderer:$.jqplot.BarRenderer, 
            xaxis:'x2axis'
        }, 
        gridPadding: {bottom: 55, top: 10},
        stackSeries: true,
        seriesColors: ['rgba(100, 150, 100, 0)', "#009900"], 
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                barMargin: 30,
                barDirection: 'horizontal',          
                shadow: false, 
                varyBarColor: true, 
            },
            pointLabels: {show: false}
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                //padMin: 0, 
                ticks: dateticks, 
                tickInterval: '1 day', 
            }, 
            x2axis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                //padMin: 0, 
                ticks: xaxis2ticks, 
            }, 
            yaxis: {
                ticks: yvals,
                padMin: 0, 
                renderer: $.jqplot.CategoryAxisRenderer,
                tickOptions: {
                    showGridline: false
                }
            }
        },
        legend: {
            show: false
        }     
    });


    plot2 = $.jqplot('chart3', [err_before, err_bars, err_after], {
        animate: true, animateReplot: true,
        series:[
            {renderer:$.jqplot.BarRenderer}, 
            {xaxis:'x2axis'}
        ], 
        gridPadding: {bottom: 55, top: 10},
        stackSeries: true,
        seriesColors: ['rgba(255, 0, 0, 0)', "#990000"], 
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: { 
                barMargin: 30,
                barDirection: 'horizontal',                 
                highlightMouseOver: true, 
                shadow: false, 
                varyBarColor: true
            }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                ticks: dateticks, 
                tickInterval: '1 day', 
                tickRenderer:$.jqplot.CanvasAxisTickRenderer,
            },
            x2axis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                ticks: xaxis2ticks
            }, 
            yaxis: {
                ticks: yvals,
                padMin: 0, 
                renderer: $.jqplot.CategoryAxisRenderer
            }
        },
        legend: {show: false}, 
        grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
    });  


    plot3 = $.jqplot('chart3', [ok_before, ok_bars, ok_after], {
        series:[
            {renderer:$.jqplot.BarRenderer}, 
            {xaxis:'xaxis'}
        ], 
        gridPadding: {bottom: 55, top: 10},
        stackSeries: true,
        seriesColors: ['rgba(255, 255, 255, 0)', "rgba(255, 255, 255, 0)"], 
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: { 
                barMargin: 30,
                barDirection: 'horizontal',                 
                highlightMouseOver: true, 
                shadow: false, 
                varyBarColor: true
            },

            pointLabels: {show: false}
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                ticks: dateticks, 
                tickInterval: '1 day', 
                tickRenderer:$.jqplot.CanvasAxisTickRenderer
                /*tickOptions: {
                    show: false
                }*/
            },
            x2axis: {
                renderer: $.jqplot.CategoryAxisRenderer, 
                ticks: xaxis2ticks
            }, 
            yaxis: {
                ticks: yvals,
                padMin: 0, 
                renderer: $.jqplot.CategoryAxisRenderer               
                /*tickOptions: {
                    show: false
                }*/
            }
        },
        legend: {show: false}, 
        grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
    }); 


  // Bind a listener to the "jqplotDataClick" event.  Here, simply change
  // the text of the info3 element to show what series and ponit were
  // clicked along with the data for that point.
    $('#chart3').bind('jqplotDataClick',
        function (ev, seriesIndex, pointIndex, data) {
            console.log(data);
            //var t = data.split(",");
            var d = yvals[(data[1]-1)];
            $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data + '<br>' + d);
        }
    );
});

http://jsfiddle.net/SPN8k/5/

来源：https://stackoverflow.com/questions/23061726/right-align-bars-jqplot