Geek asks and answers

Too big bar width in jqplot

I am new to jqplot when I want to draw a histogram, the x axis is the date, the interval is 1 day. This is part of my code:

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

But I believe that the width of each bar is too large to cover each other. How to fix it?

Thank!

+5
source share
3 answers

AnthonyLeGovic's answer is indeed correct, but if you need to change the column width according to the number of data points, you can do the following:

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

Please note that I do not take into account the width of the legend. The width of the legend can only be obtained after plotting, so if you want to reduce the width of the column, even considering the width of the legend, you must do this after plotting, and then perform a replacement.

fiddle, .

, .

+9

:

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

barRenderer. jqplot, , : Jqplot

+10

I added the code below and got the result. The reason my width is too large is because the width of the bar has not been set sequentially. The default block.

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

Thanks: AnthonyLeGovic

+2
source

More articles:


All Articles