2013-01-20 42 views
4

我想讓背景透明的一些圖表,我已經與谷歌圖表作出。除了IE7和8之外,它們都可以完美工作,我會得到一個白色的背景。谷歌圖表透明背景不起作用

我已經嘗試了每種組合都可以找到顏色屬性來改變它,但沒有任何作品。

剩下的唯一一件事就是建議有人在幾個月前在這裏爲有相同問題的其他人做出這樣的決定。他們的建議是...

對於一個透明背景,使用CHF = BG,S,FFFFFF00

但我不知道如何實現這一點?

+0

如果下面的答案適合您,請點擊答案中向上/向下箭頭下方的複選標記,以便其他人可以看到這解決了您的問題。如果我的回答不夠清楚,或者您仍然有問題,請在答案中添加評論,以解釋哪些問題/哪些問題不明確。 – jmac

回答

13

CHF = BG,S,FFFFFF00

爲舊Google Image Charts的碼。

這些代碼只適用於非SVG版本的圖表。 Google圖表圖表已被棄用(因爲您可以從他們的help pages中看到),所以除非您想實施舊式圖表,否則您將無法在新的,精美的交互式SVG圖表上實現上述代碼。

對於新奇特SVG圖表,我有運氣

backgroundColor: "transparent" 

這對谷歌遊樂場複製並粘貼到測試:

<!-- 
You are free to copy and use this sample in accordance with the terms of the 
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) 
--> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title> 
     Google Visualization API Sample 
    </title> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['corechart']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Create and populate the data table. 
     var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'], 
      ['2003', 1336060, 400361, 1001582, 997974], 
      ['2004', 1538156, 366849, 1119450, 941795], 
      ['2005', 1576579, 440514, 993360, 930593], 
      ['2006', 1600652, 434552, 1004163, 897127], 
      ['2007', 1968113, 393032, 979198, 1080887], 
      ['2008', 1901067, 517206, 916965, 1056036] 
     ]); 

     // Create and draw the visualization. 
     new google.visualization.BarChart(document.getElementById('visualization')). 
      draw(data, 
       {title:"Yearly Coffee Consumption by Country", 
        width:600, height:400, 
        vAxis: {title: "Year"}, 
        hAxis: {title: "Cups"}, 
        backgroundColor: "transparent"} 
      ); 
     } 


     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;" bgcolor="#E6E6FA"> 
    <div id="visualization" style="width: 600px; height: 400px;"></div> 
    </body> 
</html> 

這僅僅是標準的條形圖添加了兩件事的示例:

  1. bgcolor = 「#E6E6FA」 body元素(使它藍色所以如果透明,我們可以告訴)
  2. 的backgroundColor =「透明」的選項(使其透明)

這在Firefox。我不知道它是否適用於IE7(無測試環境)。讓我們知道它是否有效。

1

根據餅圖所在的配置文件進行相應更改。 我有這個圖的donate.php下爲例:

FROM

$chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,f9faf7&amp;cht=p&amp;chd=t:'.$percent.',-'.(100-$percent).'&amp;chs=200x200&amp;chco=639600&amp;chp=1.57'; 

TO

$chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,FFFFFF00&amp;cht=p&amp;chd=t:'.$percent.',-'.(100-$percent).'&amp;chs=200x200&amp;chco=639600&amp;chp=1.57'; 

的代碼讓我有透明度,當它是一個白色的背景!謝謝。