如何让谷歌饼图API背景透明

问题描述 投票:14回答:3

这是饼图容易谷歌的代码:

<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'给我们的颜色,现在我希望它是透明的,我该怎么办呢?

以及如何设置在底部的文本?因为它不是在谷歌文档清晰,真的很难理解。

这是关系到Simple Pie Chart of Google

javascript api google-visualization background-color
3个回答
27
投票

透明背景可设置有:

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

可能的选项列表是here


0
投票

我买了backgroundColor: '#676767'的answerbackgroundColor: {fill: 'transparent'},它会做要紧。

这不会对IE浏览器如IE不支持透明度,我们仍然可以通过编写这些代码添加我们选择的颜色: -

随着一点点从jQuery的帮助:

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

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

我仍无法设置在底部的位置....


0
投票

在IE中,使用jQuery,你可以做以下图表的背景设置为透明:

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

其中#vis是其中图表是在div的ID。

© www.soinside.com 2019 - 2024. All rights reserved.