2013-03-06 12 views
5

Ich bin neu in jqplot, wenn ich ein Balkendiagramm zeichnen möchte, X-Achse ist Datum, Intervall ist 1 Tag. Dies ist ein Teil meines Codes:zu große Balkenbreite in jqplot

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

Aber ich finde die Breite jedes Balkens ist zu groß, um einander abzudecken. Wie man es repariert?

Danke!

Antwort

9

Die AnthonyLeGovic Antwort ist in der Tat richtig, aber wenn Sie die Spaltenbreite ändern müssen entsprechend der Anzahl der Datenpunkte können Sie folgendes tun:

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

Beachten Sie, dass ich nicht die Breite der Legende berücksichtigen. Die Legendenbreite kann nur nach dem Plotten erhalten werden. Wenn Sie also die Spaltenbreite reduzieren möchten, indem Sie nur die Breite der Legende berücksichtigen, müssen Sie dies nach dem Plotten tun und dann neu plotten.

Ich habe eine fiddle vorbereitet, die ein Beispiel zeigt.

Ich hoffe, es hilft.

10

Sie können es in Ihrer Serie Optionen angeben:

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

Vergessen Sie nicht, barRenderer Plugins enthalten. Weitere Dokumentationen über Balkendiagramm auf jqplot einen Blick auf Sie: Jqplot documentation

+0

Vielen Dank für Ihre Antwort. Es klappt. Aber wenn die Anzahl der Datenpunkte wächst, bin ich mir nicht sicher, ob die Breite noch geeignet ist. Ich werde die Breite des Balkens dynamisch berechnen, aber wenn es eine bessere Möglichkeit gibt, das Diagramm für eine bessere Darstellung anzupassen? – dusiliang

2

Ich habe unten Code hinzugefügt und ich habe das Ergebnis. Der Grund, warum meine Breite zu groß wurde, weil die Balkenbreite nicht in der Reihe Standardblock gesetzt war.

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

Dank: AnthonyLeGovic

Verwandte Themen