2012-04-02 18 views
12

jest to kod google dla pie char apt: -jak zrobić google wykres kołowy API tło 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> 

Tutaj backgroundColor: '#676767' daje nam kolor teraz chcę to być przejrzyste, jak mogę to zrobić ?

A jak ustawić tekst na dole? Nie jest to jasne w Dokumentacji Google, naprawdę trudne do zrozumienia.

Jest to związane z Simple Pie Chart of Google

Odpowiedz

23

przezroczyste tło można ustawić:

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

Można również ustawić tytuł tam:

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

Edit: Aby ustawić odpowiednie przedmioty ręcznie, aby pokazać na dole użytku:

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

Lista możliwych opcji są here.

+0

Mówię o tych wartościach: "Praca Jedz | Dojazdy | Oglądaj telewizję | Sen ". Są po prawej stronie i widziałem, że możemy umieścić je na dole, ale jak? to jest moje zapytanie. –

+0

Edytowałem odpowiedź, aby uwzględnić, jak to zrobić. – MrCode

+0

bardzo dziękuję @MrCode –

0

Dostałem odpowiedź backgroundColor: '#676767' z backgroundColor: {fill: 'transparent'} i będzie to robić co konieczne.

To nie będzie działać na IE jak IE nie obsługuje przezroczystość, nadal możemy dodać kolor naszego wyboru pisząc ten kod: -

Przy odrobinie pomocy jQuery:

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

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

Nadal nie jestem w stanie ustawić pozycję na dole ....

0

W IE, jQuery, można wykonać następujące czynności, aby ustawić tło wykresu na przezroczyste:

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

gdzie #vis jest identyfikator div w którym wykres jest co.

Powiązane problemy