zbyt duża szerokość paska w jqplot

Question

Jestem nowy w jqplot, kiedy chcę narysować wykres słupkowy, oś x jest datą, interwał to 1 dzień. To jest część mojego kodu:

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

Ale znajdę szerokość każdego paska jest zbyt duża, aby pokryć siebie. Jak to naprawić?

Dzięki!

Answer 1

The AnthonyLeGovic odpowiedź jest rzeczywiście poprawna, ale jeśli trzeba zmienić szerokość kolumny w zależności od liczby punktów danych można wykonać następujące czynności:

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

Pamiętaj, że nie biorę pod uwagę szerokości legendy. Szerokość legendy można uzyskać tylko po narysowaniu, więc jeśli chcesz zmniejszyć szerokość kolumny, biorąc pod uwagę szerokość legendy, musisz to zrobić po wydrukowaniu, a następnie ponownie.

Przygotowałem fiddle, który pokazuje przykład.

Mam nadzieję, że to pomaga.

Answer 2

Można podać go w opcjach serii:

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

Nie zapomnij podać wtyczek barRenderer. Więcej dokumentacji około wykresie słupkowym na jqplot proszę spojrzeć na: Jqplot documentation

Answer 3

Dodałem poniższy kod i otrzymałem wynik. Powód, dla którego moja szerokość była zbyt duża, ponieważ szerokość paska nie została ustawiona w serii Blok domyślny.

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

Dzięki: AnthonyLeGovic