Как сделать google круговой диаграммы API-фон прозрачным

Question

это код 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

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

Список возможных опций: здесь .

Answer 2

В IE, используя jQuery, вы можете сделать следующее, чтобы установить прозрачный фон графика:

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

, где #vis - это идентификатор div, в котором находится диаграмма.

Answer 3

Я получил ответ backgroundColor: '#676767' с backgroundColor: {fill: 'transparent'}, и он сделает все необходимое.

Это не будет работать в IE, так как IE не поддерживает прозрачность, но мы можем добавить цвет по своему выбору, написав этот код: -

С небольшой помощью jQuery:

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

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

Я все еще не могу установить положение внизу ...