2016-05-17 4 views
2

Ich möchte ein horizontales Balkendiagramm auf einer Seite anzeigen. Ich verwende die Google-Diagrammbibliothek. Das Problem, das ich habe, ist, dass einige Etiketten verpasst werden. Gibt es eine Möglichkeit, alle Etiketten zur Anzeige zu zwingen?Google Charts Alle Labels anzeigen

google.charts.load('current', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawBasic); 

function drawBasic() { 

    var data = google.visualization.arrayToDataTable([ 
    ['City', '2010 Population', ], 
    ['New York City, NY', 8175000], 
    ['Los Angeles, CA', 3792000], 
    ['Chicago, IL', 2695000], 
    ['Houston, TX', 2099000], 
    ['Philadelphia, PA', 1526000], 
    ['New York City2, NY', 8175000], 
    ['Los Angeles2, CA', 3792000], 
    ['Chicago2, IL', 2695000], 
    ['Houston2, TX', 2099000], 
    ['Philadelphia2, PA', 1526000] 
    ]); 

    var options = { 
    title: 'Population of Largest U.S. Cities', 
    chartArea: { 
     width: '50%' 
    }, 
    hAxis: { 
     title: 'Total Population', 
     minValue: 0 
    }, 
    vAxis: { 
     title: 'City' 
    } 
    }; 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 

    chart.draw(data, options); 
} 

Demo jsfiddle

Sie im obigen Code feststellen, dass es 11 Etiketten/Werte sind. Alle Werte werden angezeigt, aber jedes andere Etikett fehlt. Ich möchte, dass alle Labels angezeigt werden.

Duplicate question < < Diese Frage gestellt wurde, aber es handelt sich um eine andere Art von Diagramm mit einer anderen Datenstruktur

Antwort

1

Sie bestimmte Größe und Platzierung des chartArea

ermöglichen Raum für jede Achsenbeschriftung einstellen und Titel

zusammen mit dem Diagramm Titel, Legende, etc ...

folgendes Beispiel zu sehen, hinzugefügt backgroundColor markieren jedem Bereich

google.charts.load('current', { 
 
    callback: drawBasic, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawBasic() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['City', '2010 Population', ], 
 
    ['New York City, NY', 8175000], 
 
    ['Los Angeles, CA', 3792000], 
 
    ['Chicago, IL', 2695000], 
 
    ['Houston, TX', 2099000], 
 
    ['Philadelphia, PA', 1526000], 
 
    ['New York City2, NY', 8175000], 
 
    ['Los Angeles2, CA', 3792000], 
 
    ['Chicago2, IL', 2695000], 
 
    ['Houston2, TX', 2099000], 
 
    ['Philadelphia2, PA', 1526000] 
 
    ]); 
 

 
    var options = { 
 
    backgroundColor: 'cyan', 
 
    title: 'Population of Largest U.S. Cities', 
 

 
    // total size of chart 
 
    height: 600, 
 
    width: 900, 
 

 
    // adjust size of chart area 
 
    chartArea: { 
 
     backgroundColor: 'magenta', 
 

 
     // allow 70px for hAxis title and ticks 
 
     height: 480, 
 

 
     // allow 200px for vAxis title and ticks 
 
     left: 200, 
 

 
     // allow 50px for chart title 
 
     top: 50, 
 

 
     // allow 200px for legend on right 
 
     width: 500 
 
    }, 
 

 
    colors: ['yellow'], 
 
    hAxis: { 
 
     title: 'Total Population', 
 
     minValue: 0 
 
    }, 
 
    vAxis: { 
 
     title: 'City' 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>