2012-04-02 21 views
12

questo è il codice di Google per char pie apt: -come fare Google grafico a torta api sfondo transperent

<script type="text/javascript"> 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Topping'); 
     data.addColumn('number', 'Slices'); 
     data.addRows([ 
      ['Mushrooms', 3], 
      ['Onions', 1], 
      ['Olives', 1], 
      ['Zucchini', 1], 
      ['Pepperoni', 2] 
     ]); 

     var options = {backgroundColor: '#676767', 
         'width':400, 
         'height':300}; 

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

Qui il backgroundColor: '#676767' ci dà il colore ora voglio che sia trasparente, come posso farlo ?

E come impostare il testo in basso? Come non è chiaro nella documentazione di Google, è davvero difficile da capire.

questo è legato al Simple Pie Chart of Google

risposta

23

lo sfondo trasparente può essere impostato con:

var options = {backgroundColor: 'transparent', 
        'width':400, 
        'height':300}; 

È anche possibile impostare il titolo c'è:

var options = {backgroundColor: 'transparent', 
        'width':400, 
        'height':300, 
        'title' : 'My Chart'}; 

Edit: Per impostare le voci mano destra per mostrare in uso in basso:

var options = {backgroundColor: 'transparent', 
        'width':400, 
        'height':300, 
        'title' : 'My Chart' 
        legend : { position : 'bottom' } 
        }; 

La lista delle possibili opzioni sono here.

+0

Sto parlando di questi valori 'Work Eat | Permuta | Guarda la TV | Sleep'. Questi sono sul lato destro e ho visto che possiamo metterli in fondo, ma come? questa è la mia domanda. –

+0

Ho modificato la risposta per includere come farlo. – MrCode

+0

grazie mille @MrCode –

0

ho avuto la risposta backgroundColor: '#676767' con backgroundColor: {fill: 'transparent'} e sarà fare il necessario.

Questo non funziona su IE come IE non supporta la trasparenza, ancora possiamo aggiungere colore della nostra scelta, scrivendo questo codice: -

Con un po 'di aiuto da jQuery:

// check for IE 
if ($.browser.msie) { 
    options2['backgroundColor'] = {fill: <color>}; 
} 

else { 
    options2['backgroundColor'] = {fill: 'transparent'}; 
} 

Ancora io sono in grado di impostare la posizione in fondo ....

0

In IE, utilizzando jQuery, è possibile effettuare le seguenti operazioni per impostare lo sfondo del grafico a trasparente:

$('#vis iframe').attr('allowTransparency', 'true'); 
$('#vis iframe').contents().find('body').css('background', 'transparent'); 

dove #vis è l'id del div in cui il grafico è a.

Problemi correlati