2012-06-12 79 views
2

我正在使用下面的一段代码来显示jqPlot中的一组条形图。但是,我遇到了两个问题:jqPlot-问题显示条形图-axis填充和栏间距离

  1. xaxis的范围值的两侧都没有填充。 pad属性似乎不起作用。

  2. 当条数很大时,条重叠在一起。 barPadding属性似乎没有效果。

我看着这个链接Having problems with jqPlot bar chart。答案建议使用CategoryAxisRenderer。但由于我使用的是时间序列数据,因此我需要DateAxisRenderer

请帮忙。

function plotBarGraph(data,myticks,series) 
{ 
    $("#placeholder").empty(); 
    $.jqplot('placeholder',data, 
      { 
       //stackSeries:true, 
        seriesDefaults:{ 
         renderer:$.jqplot.BarRenderer, 
         barMargin:1, 
         barPadding:0.5 
        }, 
        axes: 
         { 
         xaxis: 
          { 
          ticks:myticks, 
          tickInterval:10, 
          renderer:$.jqplot.DateAxisRenderer, 
          pad:2.5, 
          tickOptions: 
           { 
           formatString:'%d-%m-%y' 
           } 
          } 
         }, 
         legend: 
          { 
          show:true, 
          labels:series 
          }  
      }); 
} 
+0

请在http://jsfiddle.net上构建一个工作示例,以便可以试验您的数据,并且可以更快地获得解决方案。 – Boro

回答

1

在这种情况下,如果你不希望使用在链接中提到的方法,您可以与您的日期轴的最大/最小值玩。

我想你也可能会发现有用的the approach to a similar sort of problem with padding我选择在创建时设置刻度并在绘制绘制后隐藏不需要的刻度。

在我可以得到任何进一步的帮助之前,请提供一个示例来说明您的问题。

0

对于第二个问题,我遇到了类似的问题。我设置了一个选择语句,根据其中有多少条线条来扩大我的图表的大小。然后,我做了父卷可滚动(称为“dataHolder”),并解决了这个问题。

 // set div properties depending on how many sets of data are in the 
     //array so the view is sized properly 
     $("#chartDiv").html("").css("width", "750px"); // chartDiv's default settings 
     $("#tabs-6").removeClass("dataHolder").css("width", "900px"); // parent Div's default settings 
     if (dataArray.length > 10) { 
      $("#chartDiv").css("width", "1600px"); 
      $("#tabs-6").addClass("dataHolder").css("width", "900px"); 
     } else if (dataArray.length > 6) { 
      $("#chartDiv").css("width", "1200px"); 
      $("#tabs-6").addClass("dataHolder").css("width", "900px"); 
     } 
0

我找到了一个解决方案,将Date数据与CategoryAxisRenderer一起使用。你必须像下面这样配置deaxax:

axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      rendererOptions: { 
       tickRenderer: $.jqplot.DateTickRenderer, 
       tickOptions: { 
        formatter: $.jqplot.DateTickFormatter, 
        formatString:'%d/%m' 
       } 
      } 
     } 
    } 

我希望它有帮助! ;)