Visualizzazione Legenda del grafico a torta Google

Sto tentando di utilizzare l'API del grafico a torta di Google e il grafico e la legenda appaiono in verticale con il grafico in cima e la legenda in basso. Voglio solo che la larghezza del grafico sia di 300 px e che abbia spostato correttamente la legenda sotto il grafico. Tuttavia, poiché la larghezza è così piccola, la legenda "taglia" e aggiunge le frecce sinistra/destra e # per scorrere le voci della Legenda.Visualizzazione Legenda del grafico a torta Google

Sto cercando di fare in modo che la legenda mostri i suoi articoli in verticale in un elenco. non da sinistra a destra, ma dall'alto al basso in modo che ogni elemento possa essere visto. Non ho visto nessuna opzione di configurazione per questa correzione specifica nella loro documentazione.

Ecco il mio codice:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Percentage'], 
     ['Trust Funds - 52.6%',  52.6], 
     ['Ed & Training - 13.6%',  13.6], 
     ['Safety, Health & Env. - 10.5%', 10.5], 
     ['Econ Dev & Infrastructure - 9.5%', 9.5], 
     ['Admin - 7.2%', 7.2], 
     ['Other - 2.2%', 2.2], 
     ['Resettlement - 2%', 2], 
     ['Matching Gifts/UW - 1.6%', 1.6], 
     ['Arts/Culture - 0.8%', 0.8] 
    ]); 


    var options = { 
     colors:['#d1ae2b','#b38849','#d8a35c','#636466','#a09f9f','#31536e','#4c7ea4','#73bfe5','#88d6f8'], 
     pieSliceText:['none'], 
     legend:{position: 'bottom'}, 
     chartArea:{left:6,top:6,width:"300px",height:"300px"} 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 
</script> 

    <div id="chart_div" style="width: 300px; height: 300px;"></div>

fonte

2012-06-27 Deep Rooted

Sembra che l'orientamento della leggenda è determinato dalla posizione tu scegli, sfortunatamente. Dal momento che conosci i colori che stai fornendo, potresti non crearne di tuoi? – cchana

speravo di essere in grado di mantenere la natura dinamica della lista delle leggende. quando si scorre su quegli elementi il grafico a torta "evidenzia", che è qualcosa che vogliamo mantenere. ma potrei facilmente rimuovere la legenda e solo hardcript una leggenda. Grazie. –

È persino possibile replicare questa funzionalità con metodi ed eventi: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#Methods – cchana

Fiddle Link è sufficiente rimuovere la leggenda di configurazione: {position: 'bottom'},

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <div id="chart_div" style="width: 300px; height: 300px;"></div> 

google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Percentage'], 
     ['Trust Funds - 52.6%',  52.6], 
     ['Ed & Training - 13.6%',  13.6], 
     ['Safety, Health & Env. - 10.5%', 10.5], 
     ['Econ Dev & Infrastructure - 9.5%', 9.5], 
     ['Admin - 7.2%', 7.2], 
     ['Other - 2.2%', 2.2], 
     ['Resettlement - 2%', 2], 
     ['Matching Gifts/UW - 1.6%', 1.6], 
     ['Arts/Culture - 0.8%', 0.8] 
    ]); 


    var options = { 
    width:'50px', 
     colors:['#d1ae2b','#b38849','#d8a35c','#636466','#a09f9f','#31536e','#4c7ea4','#73bfe5','#88d6f8'], 
     pieSliceText:['none'], 
     chartArea:{left:1,top:6,width:"100%",height:"100px"} 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    }

fonte

2016-05-20 11:36:42

Visualizzazione Legenda del grafico a torta Google

risposta

Problemi correlati