web-dev-qa-db-ja.com

グーグル円グラフAPIの背景を透明にする方法

これは、pie charaptのGoogleコードです。

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

ここでbackgroundColor: '#676767'透明にしたい色が表示されますが、どうすればよいですか？

そして、テキストを一番下に設定する方法は？ Googleのドキュメントでは明確ではないため、理解するのは非常に困難です。

これは Googleの単純な円グラフ に関連しています

javascriptapigoogle-visualizationbackground-color
15
Django Anonymous

透明な背景は次のように設定できます。

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

ここでタイトルを設定することもできます。

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

編集：下部に表示する右側のアイテムを設定するには、次を使用します。

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

可能なオプションのリストは ここ です。

27
MrCode

IEでは、jQueryを使用して、次の操作を実行して、グラフの背景を透明に設定できます。

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

どこ #visは、チャートが存在するdivのIDです。

0
Arnoud Philip

私は答えを得ましたbackgroundColor: '#676767' with backgroundColor: {fill: 'transparent'}そしてそれは必要なことをします。

これはIE as IEは透明度をサポートしていませんが、次のコードを記述して、選択した色を追加できます。

JQueryの助けを借りて：

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

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

それでも下の位置を設定することはできません...

0
Django Anonymous