Google Pie Chart Leyenda Mostrar

Estoy tratando de usar la API de gráfico circular de Google y hacer que el gráfico y la leyenda aparezcan verticalmente con el gráfico encima y la leyenda debajo. Solo quiero que el ancho del gráfico sea 300 px y haya movido con éxito la leyenda debajo del gráfico. Sin embargo, dado que el ancho es muy pequeño, la leyenda "corta" y agrega las flechas hacia la izquierda/derecha y los números para desplazarse por los elementos de Leyenda.Google Pie Chart Leyenda Mostrar

Estoy tratando de que la leyenda también muestre sus elementos verticalmente en una lista. no de izquierda a derecha, sino de arriba hacia abajo para que se pueda ver cada elemento. No vi ninguna opción de configuración para esta corrección específica en su documentación.

Aquí está mi código:

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

Fuente

2012-06-27 Deep Rooted

Parece que la orientación de la leyenda se determina por la posición tú eliges, por desgracia. Como sabes los colores que estás proporcionando, ¿no podrías crear los tuyos? – cchana

esperaba poder mantener la naturaleza dinámica de la lista de leyendas. cuando se desplaza sobre esos elementos, el gráfico circular "resalta", que es algo que queremos mantener. pero podría eliminar fácilmente la leyenda y simplemente codificar una leyenda. Gracias. –

Incluso puede replicar esta funcionalidad con métodos y eventos: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#Methods – cchana

Fiddle Link acaba de quitar la leyenda de configuración: {position: 'inferior'},

<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); 
    }

Fuente

2016-05-20 11:36:42

Respuesta

Cuestiones relacionadas