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,                                                                  
    },

但是我发现每个条的宽度太大而无法相互覆盖。如何解决？

谢谢！

Answer 1

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

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

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

Answer 2

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。

希望它有所帮助。

Answer 3

我添加了以下代码，我得到了结果。我的宽度背后的原因是因为条形宽度没有设置为系列默认块。

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

感谢：AnthonyLeGovic

jqplot中的条宽度太大

3 个答案: