javascript - jqplot 不会在我的内部网格上给我填充

Question

我们有一个看起来像这样的图表：

非常好。好吧，除了第一个和最后一个小节被分成两半！

我知道它为什么会这样，但我不知道如何解决它。我试过 gridPadding、barPad 和 Pad。应该是其他人吧。无论出于何种原因，如果不预先添加一些空白的虚拟数据，我似乎无法让他们推送。这使得底部多了两个令人困惑的条目，这绝对是不可接受的。

代码如下。

var f = [[0,1.29],[1,1.29],[2,1.48],[3,1.48],[4,1.48],[5,1.48],[6,1.48],[7,1.48]];
var v = [[0,0.71],[1,0.71],[2,0.8],[3,0.8],[4,0.8],[5,0.8],[6,0.8],[7,0.8]];
var p = [[0,-0.26],[1,-0.26],[2,0.67],[3,0.67],[4,0.67],[5,0.67],[6,0.67],[7,0.67]];

// [x position, y height]
var x_line = [[0,1],[1,21],[2,33],[3,39],[4,21],[5,21],[6,21],[7,21]];
var rank_ticks = [0,1,2,3,4,5,6,7];

$('body').on('click', '#load-fvp', function () {

    var plot2 = $.jqplot('fvp-chart', [f, v, p, x_line], {
        stackSeries: true,
        gridPadding: 40,
        highlighter: {
            show: true,
            tooltipAxes: 'y',
            useAxesFormatters: false,
            formatString: "<span style='display: none;'>%s</span> %s" // hide the first S because it's irrelevant
        },
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barWidth: 24,
                shadowAlpha: 0.03,
                fillToZero: true,
                highlightMouseOver: false
            },
            pointLabels: {
                show: true,
                stackedValue: true
            }
        },
        legend: {
            show: true,
            location: 'nw',
            labels: ['Fund.', 'Value', 'Price', 'Rank']
        },
        series: [
                 {showLabel: true, useNegativeColors: false},
                 {showLabel: true, useNegativeColors: false},
                 {showLabel: true, useNegativeColors: false},
                  {
                    disableStack : true,//otherwise it wil be added to values of previous series
                    renderer: $.jqplot.LineRenderer,
                    lineWidth: 2,
                    pointLabels: {
                        show: false
                    },
                    color: '#FF7D7D',
                    markerOptions: {
                        size: 5, color: 'red'
                    },
                    xaxis: 'x2axis', yaxis: 'y2axis',
                  }
                  //, color: '#FFCC66', useNegativeColors: false, shadow: false, fill: false, lineWidth: 3, fillToZero: true
                ],

        axesDefaults: {
            //tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        },
        axes: {
            xaxis: {
                ticks: rank_ticks,
                tickOptions: {
                    formatString:'%d',
                    fontSize:'7pt',
                    fontFamily:'\"Lucida Grande\",Verdana, Georgia, Times, serif',
                },
            },
            x2axis: {
                ticks: rank_ticks,
                showTicks: false
            },
            yaxis: {
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                ticks: [-4, -3, -2, -1, 0, 1, 2, 3, 4],
                label: "Information Ratio",
                labelOptions: {
                  angle: 270,
                  fontFamily: "Verdana, Helvetica",
                  fontSize: "13pt",
                  textColor: '#111'
                },
                tickOptions: { 
                    formatString:'%d',
                    fontSize:'7pt',
                    fontFamily:'\"Lucida Grande\",Verdana, Georgia, Times, serif',
                },
            },
            y2axis: {
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                ticks: [100, 50, 1],
                showLabel: true,
                label: "Rank",
                labelOptions: {
                  angle: 90,
                  fontFamily: "Verdana, Helvetica",
                  fontSize: "13pt",
                  textColor: '#FF7D7D'
                },
                tickOptions: { 
                    formatString:'%d',
                    fontSize:'7pt',
                    fontFamily:'\"Lucida Grande\",Verdana, Georgia, Times, serif',
                },
            }
    }});

    $('.jqplot-table-legend').css('left', '567px').css('top', '-14px');
});

Answer 1

试试这些值：

gridPadding:{
        right:40,
        left:40
    }