2016-12-10 1 views
-3

Ich benutze morris.js, um Balkendiagramm zu erstellen. Aber die Größe der Leiste ist zu breit. Können Sie vorschlagen, wie kann ich die Balkengröße einschränken?Balkendiagramm horizontale Balkenbreite Ich möchte feste oder maximale Breite für jeden horizontalen Balken

You can find screen shot of chart here

Mit dem Java Script-Code

var bar = new Morris.Bar({ 
     element: 'bar-chart', 
     resize: true, 
     data: [ 
     {y: '2012', a: 100, b: 90} 
     ], 
     barColors: ['#00a65a', '#f56954'], 
     xkey: 'y', 
     ykeys: ['a', 'b'], 
     labels: ['CPU', 'DISK'], 
     hideHover: 'auto' 
    }); 
+0

Was genau ist falsch damit? Zu weit? Zu groß? Wir haben keine Ahnung, was Ihre Skala sein soll, wie Sie sie erstellt haben usw. Das Einzige, was wir von Ihnen wissen, ist, dass Sie ein Balkendiagramm haben. –

+0

Entschuldigung, ich habe jetzt weitere Informationen in meiner Frage hinzugefügt. –

+0

Ich sehe, dass du deine Frage bearbeitet hast, aber du hast auch eine wichtige Änderung rückgängig gemacht, die jemand anderes gemacht hat, und dein Bild zurück in einen Link geändert (ich habe das noch einmal korrigiert). Niemand sollte auf einen Link klicken müssen, um das Bild zu sehen. –

Antwort

2

Sie können barSizeRatio verwenden, um die Breite der Balken zu steuern. Also, wenn Sie wenige Balken haben, z.B. weniger als 5, setze barSizeRatio auf 0.2. Geben Sie für mehr als 5 Balken kein barSizeRatio an, sondern lassen Sie sich vom Diagramm steuern.

jsfiddle http://jsfiddle.net/bv4xezh7/1/

Morris.Bar({ 
barSizeRatio:0.2, 
    element: 'chart', 
    data: [ 
    { date: '04-02-2014', value: 3 }, 
    { date: '04-03-2014', value: 10 }, 

    ], 
    xkey: 'date', 
    ykeys: ['value'], 
    labels: ['Orders'] 
}); 

Sie können es dynamischer machen, indem die Breite der Diagramms Kontrolle herauszufinden und dann den Wert von barSizeRatio entscheiden, Ihre maximalen Strichbreitenkriterien zu erfüllen.

Verwandte Themen