5

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

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

谢谢！

4

3 回答 3

10

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

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

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

于 2013-03-06T12:01:26.510 回答
10

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
    // ...
}

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

我准备了一个 显示示例的小提琴。

希望能帮助到你。

于 2013-11-06T15:13:48.563 回答
2

我添加了下面的代码，我得到了结果。我的宽度背后的原因是太大了，因为 bar-width 没有在系列默认块中设置。

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

感谢：AnthonyLeGovic

于 2014-01-14T12:35:30.137 回答