Как сделать диаграмму google api фоном transperent

это код google для pie char apt: -

<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

Ответы

Ответ 1

Прозрачный фон можно установить с помощью:

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

Вы также можете указать заголовок:

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

Edit: Чтобы установить позиции правой руки, чтобы показать внизу, используйте:

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

Список возможных вариантов здесь.

Ответ 2

Я получил ответ backgroundColor: '#676767' с помощью backgroundColor: {fill: 'transparent'}, и он сделает нужным.

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

С некоторой помощью jQuery:

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

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

Тем не менее я не могу установить позицию внизу.

Ответ 3

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

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

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