2013-12-09 13 views
6

Ich verwende die Google Chart API und konvertierte ein Liniendiagramm (siehe unten) in ein Säulendiagramm, jedoch ändern sich die Spaltenbreiten in Abhängigkeit von der Anzahl der Datenspalten. Wenn ich den Mauszeiger darüber bewege, wird das korrekte Datum angezeigt, aber aufgrund der sich ändernden Breite der Spalte können Sie das Datum, das die Spalte darstellen sollte, nicht genau sehen. Ein Punkt würde funktionieren, also könnte ich zu einem Liniendiagramm zurückkehren, eine Spalte sieht jedoch besser für den Datensatz aus, den ich verwende. Irgendeine Idee, wie man dieses Problem löst?Google Charts/Visualisierungen Spaltenbreite

Datum ist dynamisch, daher muss die X-Achse variabel sein.

Dank

// Create a line chart, passing some options 
       var LineChart = new google.visualization.ChartWrapper({ 
        'chartType': 'ColumnChart', 
        'containerId': 'chart_div', 
        'options': { 
         'vAxis': {'title': 'Species Abundance', 'minValue': 0, 'maxValue': 32}, 
         'width': 300, 
         'height': 300, 
         'legend': 'top',   
         'title': 'Selected Site and Species abundance over time' 
        }, 
        'view': {'columns': [0, 1]}, 
       }); 

Example Graphs

Antwort

13

Sie können durch Einstellen der bar.groupWidth Option auf eine ganze Zahl (die Anzahl der Pixel für eine Stabgruppe verwenden), um eine maximale Breite eingestellt. Wenn diese Option gesetzt wird, versucht die API, alle Balkengruppen (die Menge der Balken bei einem bestimmten Achsenwert) auf diese Breite zu zeichnen, obwohl sie gezwungen sein könnte, sie kleiner zu zeichnen, wenn das Setup des Diagramms dies erfordert.

bar: { 
    groupWidth: 20 
} 
+0

Wie max groupWidth für Bar –

+0

einstellen Oder Sie können bar eingestellt: {groupWidth: '50% '}, wenn Sie% anstelle von Pixeln verwenden möchten – user3655574