在jqplot中条形图宽度过大

Question

我刚开始接触jqplot，当我想画柱状图时，x轴是日期，间隔为1天。这是我的代码的一部分：

     axesDefaults:{                                                                  
          tickRenderer: $.jqplot.CanvasAxisTickRenderer,                              
         tickOptions:{
            fontSize:'10pt',
         },                                                                          
    },                                                                              
     axes:{                                                                          
         xaxis:{
            renderer:$x_renderer,                                                   
             tickOptions:{
               formatString:'%Y-%#m-%#d',                                          
            },
            rendererOptions:{                                                       
                 tickOptions:{
                     angle:-90,                                                      
                 }                                                                   
              },                                                                      
             label:'$label',
             tickInterval:'86400000',
         },
         yaxis:{                                                                     
            tickOptions:{
               formatString:'%.2f',                                                
             },                                                                      
           autoscale:true                                                          
         }, 
    },                                                                              
     highlighter:{ 
         show:true,                                                                  
    },

但是我发现每个柱子的宽度太大，会相互遮盖。如何解决？

谢谢！

- dusiliang

Answer 1

AnthonyLeGovic的答案确实是正确的，但如果您需要根据数据点数量更改列宽，可以执行以下操作：

// Get the size of the container of the plot
var width = jQuery(containerName).width();

// Divide by the number of data points.
width = width / number_of_data_points;

// Reduce the width to a % of the total for each data point.
width = (width * 20) / 100;

// Set the value
$.jqplot(containerName, [data],
{
    // whatever
    // ...

    seriesDefault:
    {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: { barWidth: width }
    }

    // whatever
    // ...
}

请注意，我没有考虑图例的宽度。图例的宽度只能在绘图后获得，因此如果您想考虑甚至图例的宽度来减小列宽，则必须在绘图后进行，并重新绘制。

我准备了一个示例fiddle。

希望能有所帮助。

- PaperBirdMaster

Answer 2

您可以在系列选项中指定它：

seriesDefault:{
   renderer: $.jqplot.BarRenderer,
   rendererOptions: {
      barWidth: 5
   }
}

不要忘记包含 barRenderer 插件。有关 jqplot 条形图的更多文档，请查看：Jqplot 文档

- AnthonyLeGovic

---

谢谢你的回答。它有效。但是当数据点数量增加时，我不确定宽度是否仍然合适。我将动态计算条形图的宽度，但如果有更好的方法来调整图表以获得更好的显示效果呢？ - dusiliang

Answer 3

我添加了以下代码并得到了结果。我的宽度过大的原因是由于未在系列默认块中设置bar-width。

 seriesDefault:{
   renderer: $.jqplot.BarRenderer,   
   rendererOptions: {
          barWidth: 5   
  }
}

感谢：AnthonyLeGovic

- user2282645