如何使谷歌饼图api背景transperent

时间:2022-12-03 17:28:24

this is the google code for pie char apt:-

这是馅饼char的谷歌代码: -

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

Here the backgroundColor: '#676767' gives us the color now i want it to be transparent, how can i do that?

这里的backgroundColor:'#676767'给我们现在的颜色,我希望它是透明的,我该怎么做?

And how to set the text in bottom? As its not clear in Google Documentation, really tough to understand.

以及如何在底部设置文本?由于在Google文档中不明确,因此很难理解。

This is related to the Simple Pie Chart of Google

这与谷歌的简单饼图有关

3 个解决方案

#1


24  

The transparent background can be set with:

透明背景可以设置为:

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

You can also set the title there:

你也可以在那里设置标题:

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

Edit: To set the right hand items to show at the bottom use:

编辑:要设置要在底部显示的右手项目使用:

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

The list of possible options are here.

可能的选项列表在这里。

#2


0  

I got the answerbackgroundColor: '#676767' with backgroundColor: {fill: 'transparent'} and it will do the needful.

我得到了answerbackgroundColor:'#676767'与backgroundColor:{fill:'transparent'}它将做必要的。

This will not work on IE as IE does not support Transparency, still we can add color of our choice by writing this code:-

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

With a bit of help from jQuery:

在jQuery的帮助下:

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

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

Still i am unable to set the position in bottom....

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

#3


0  

In IE, using jQuery, you can do the following to set the chart's background to transparent:

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

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

where #vis is the id of the div where the chart is at.

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

#1


24  

The transparent background can be set with:

透明背景可以设置为:

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

You can also set the title there:

你也可以在那里设置标题:

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

Edit: To set the right hand items to show at the bottom use:

编辑:要设置要在底部显示的右手项目使用:

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

The list of possible options are here.

可能的选项列表在这里。

#2


0  

I got the answerbackgroundColor: '#676767' with backgroundColor: {fill: 'transparent'} and it will do the needful.

我得到了answerbackgroundColor:'#676767'与backgroundColor:{fill:'transparent'}它将做必要的。

This will not work on IE as IE does not support Transparency, still we can add color of our choice by writing this code:-

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

With a bit of help from jQuery:

在jQuery的帮助下:

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

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

Still i am unable to set the position in bottom....

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

#3


0  

In IE, using jQuery, you can do the following to set the chart's background to transparent:

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

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

where #vis is the id of the div where the chart is at.

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