JqPlot-如何減少網格和刻度的寬度

Question

我想用jqplot部署條形圖。現在如何減少網格和蜱的寬度？ 我已經通過將showGridline設置爲false來移除網格線，但它仍然垂直顯示。

我的屏幕。

我想x軸蜱出現這樣的事情。

我的js代碼。

$(document).ready(function() { 
    var s1 = [10, 20, 30, 40]; 
    // Can specify a custom tick Array. 
    // Ticks should match up one for each y value (category) in the series. 
    var ticks = [1, 2, 3, 4]; 
    var plot1 = $.jqplot('chart1', [s1], { 
     // The "seriesDefaults" option is an options object that will 
     // be applied to all series in the chart. 
     seriesDefaults: { 
      renderer: $.jqplot.BarRenderer, 
      rendererOptions: { 
       barMargin: 2, 
       barWidth: 15 
      } 
     }, 
     grid: { 
      drawBorder: false, 
      background: '#ffffff', 
      // CSS color spec for background color of grid 
     }, 
     axesDefaults: { 
      tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
      tickOptions: { 
       markSize: 4 
      } 
     }, 
     axes: { 
      // Use a category axis on the x axis and use our custom ticks.   
      xaxis: { 
       pad: -1.05, 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: ticks 
      }, 
      yaxis: { 
       pad: 1.05, 
       tickOptions: { 
        formatString: '%d', 
        showGridline: false 
       } 
      } 
     } 
    }); 
});  

可能有人可以幫忙嗎？

Answer 1

要刪除網格線，適用以下財產上的兩個x軸和y軸：

tickOptions: { 
    showGridline: false 
} 

在你的代碼，你已經設置了barWidth至15像素。在繪製圖表之前，請確保div的寬度不小於x軸tixks * 15（大約）的數量。

或

調整根據您div的寬度在運行時各條的寬度。

這裏是一個解決您的問題的例子： JsFiddle link

HTML代碼：

<div id="chart1" style="margin-top:20px; margin-left:20px; width:310px; height:300px;"></div> 

JS代碼：

$(document).ready(function() { 
    var s1 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]; 
    // Can specify a custom tick Array. 
    // Ticks should match up one for each y value (category) in the series. 
    var ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
    var plot1 = $.jqplot('chart1', [s1], { 
     // The "seriesDefaults" option is an options object that will 
     // be applied to all series in the chart. 
     seriesDefaults: { 
      renderer: $.jqplot.BarRenderer, 
      rendererOptions: { 
       barMargin: 2, 
       barWidth: 25 
      }, 
      shadow: false 
     }, 
     grid: { 
      drawBorder: false, 
      background: '#ffffff', 
      // CSS color spec for background color of grid 
     }, 
     axesDefaults: { 
      tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
      tickOptions: { 
       markSize: 4 
      } 
     }, 
     axes: { 
      // Use a category axis on the x axis and use our custom ticks.   
      xaxis: { 
       pad: -1.05, 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: ticks, 
       tickOptions: { 
        showGridline: false 
       } 
      }, 
      yaxis: { 
       pad: 1.05, 
       tickOptions: { 
        formatString: '%d', 
        showGridline: false 
       } 
      } 
     } 
    }); 
});