2012-10-17 31 views
0

我們有一個看起來像圖:jqplot不會給我墊在我的內網

enter image description here

很不錯的。那麼,除了第一個和最後一個酒吧分成兩半!

我知道它爲什麼這樣做,但我不知道如何解決它。我試過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'); 
}); 

回答

0

嘗試這些值:

gridPadding:{ 
     right:40, 
     left:40 
    }