Question

这是pie char apt的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文档中不太清楚，因此很难理解。

这与Simple Pie Chart of Google

有关

Answer 1

透明背景可以设置为：

    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。

Answer 2

我得到了backgroundColor: '#676767' backgroundColor: {fill: 'transparent'}的答案，它将完成所需的工作。

这不适用于IE，因为IE不支持透明度，我们仍然可以通过编写此代码来添加我们选择的颜色： -

得到jQuery的一些帮助：

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

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

我还是无法在底部设置位置....

Answer 3

在IE中，使用jQuery，您可以执行以下操作将图表的背景设置为透明：

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

其中#vis是图表所在div的id。

如何使谷歌饼图api背景透明

3 个答案: