2012-10-09 43 views
0

我有一個條形圖,使用JqPlot創建。它呈現如下:JqPlot條形圖 - 酒吧位置卡住左邊

Bar Chart Image

下面是條形圖jQuery代碼:

$(document).ready(function(){ 

    var plots = [[['US',330]], [['GB',300]], [['IN',230]], [['AU',70]], [['RoW',70]]] 
    var plot1 = $.jqplot('TopCountries', plots, { 
     // The "seriesDefaults" option is an options object that will 
     // be applied to all series in the chart. 
     animate: true, 
      // Will animate plot on calls to plot1.replot({resetAxes:true}) 
      animateReplot: true, 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      pointLabels: { show: true, location: 'n', edgeTolerance: -15 }, 
      rendererOptions: { 
      fillToZero: true, 
      barWidth: 15, 
      shadow: false 
      } 
     }, 
     // Custom labels for the series are specified with the "label" 
     // option on the series option. Here a series option object 
     // is specified for each series. 
     series:[ 

     ], 
     axes: { 
      // Use a category axis on the x axis and use our custom ticks. 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       //ticks: ticks 
      }, 
      // Pad the y axis just a little so bars can get close to, but 
      // not touch, the grid boundaries. 1.2 is the default padding. 
      yaxis: { 
       pad: 1.05, 
       //tickOptions: {formatString: '$%d'} 
      } 
     } 
    }); 
}); 

這是完美的,但是我想在酒吧自己是厚。如果我將barWidth更改爲較高,那麼這些小節確實會變得更粗,但看起來與左側對齊,從而導致小節出現在圖表上。

Bar Chart 2

理想我想在酒吧坐只是蜱以上。我玩過edgeTolerance,fillToZero,yaxis墊等,但是這些似乎沒有什麼區別。

任何人都知道我能做什麼?

回答

4

你有兩個錯誤:
- 在情節 '[' 不能很好的放置
- 添加varyBarColor:真

var plots = [['US',330], ['GB',300], ['IN',230], ['AU',70], ['RoW',70]]; 
var plot1 = $.jqplot('chartgaugeidentauto', [plots], { 
// The "seriesDefaults" option is an options object that will 
// be applied to all series in the chart. 
animate: true, 
// Will animate plot on calls to plot1.replot({resetAxes:true}) 
animateReplot: true, 
seriesDefaults:{ 
    renderer:$.jqplot.BarRenderer, 
    pointLabels: { 
     show: true, 
     location: 'n', 
     edgeTolerance: -15 
    }, 
    rendererOptions: { 
     fillToZero: true, 
     barWidth: 15, 
     shadow: false, 
     varyBarColor: true 
    } 
}, 
// Custom labels for the series are specified with the "label" 
// option on the series option. Here a series option object 
// is specified for each series. 
series:[ 
], 
axes: { 
    // Use a category axis on the x axis and use our custom ticks. 
    xaxis: { 
     renderer: $.jqplot.CategoryAxisRenderer, 
     //ticks: ticks 
    }, 
    // Pad the y axis just a little so bars can get close to, but 
    // not touch, the grid boundaries. 1.2 is the default padding. 
    yaxis: { 
     pad: 1.05, 
     //tickOptions: {formatString: '$%d'} 
    } 
} 
}); 

結果:enter image description here

0

您是否可以減少barMargin屬性?即:

seriesDefaults:{ 
    renderer:$.jqplot.BarRenderer, 
     waterfall:true, 
     shadow:true, 
     rendererOptions: { 
     barWidth:20, 
     barMargin:10, 
     barPadding:10 
    } 
}...