Question

我想要做的就是将背景颜色更改为透明，但无论我在（太棒了！...）文档中的任何位置看到的选项组合，我都无法改变颜色。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title></title>


  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {
      'packages': ['bar']
    });
    google.charts.setOnLoadCallback(drawStuff);

    function drawStuff() {
      var data = new google.visualization.arrayToDataTable([
        ['Opening Move', 'Percentage'],
        ["King's pawn (e4)", 44],
        ["Queen's pawn (d4)", 31],
        ["Knight to King 3 (Nf3)", 12],
        ["Queen's bishop pawn (c4)", 10],
        ['Other', 3]
      ]);

      var options = {

        title: 'Chess opening moves',
        width: 900,
        legend: {
          position: 'none'
        },
        chart: {
          title: 'Chess opening moves',
          subtitle: 'popularity by percentage'
        },

        bars: 'horizontal',
        axes: {
          x: {
            0: {
              side: 'top',
              label: 'Percentage'
            } // Top x-axis.
          }
        },
        bar: {
          groupWidth: "90%"
        }
      };

      var chart = new google.charts.Bar(document.getElementById('top_x_div'));
      chart.draw(data, options);
    };
  </script>

</head>

<body>
  <div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>

</html>

Answer 1

当然，对于Classic GViz，options：

backgroundColor: {fill:'transparent'},

如果您使用的是Materials BETA

，则无效

但以下内容适用于经典和材料

在<style>

</head>

添加此规则集：

 rect {
       fill:transparent;
   }

OP正在使用材料，它是documented at the Materials Bar Chart section以下内容：

材料图表处于测试阶段。外观和交互性在很大程度上是最终的，但经典图表中提供的许多选项尚未在其中提供。您可以找到此问题尚不支持的选项列表。

此外，声明选项的方式尚未最终确定，因此您必须通过替换此行来转换选项：

chart.draw(data, options);

......用这个：

chart.draw(data, google.charts.Bar.convertOptions(options));

在Snippet 2中，我们可以清楚地看到我们确实可以使GViz图表背景透明。核心图形是SVG，所以如果我们想要以图形方式更多地控制图表，我们需要知道一点SVG。

SNIPPET 1

＆＃13;

   <!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
      <title>Basic GVis ChartWrapper Setup</title>
      <style>
        body {background:url(http://www.koolchart.com/images/background.jpg)no-repeat; background-size:cover;}
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">
        google.charts.load('current', {
          'packages': ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        var options = {
          backgroundColor: {fill:'transparent'},
          title: 'Google Visualization ChartWrapper Setup',
          titleTextStyle: {
            color: 'blue',
            fontName: 'Arial',
            fontSize: 22
          },
          hAxis: {
            textStyle: {
              color: '#993300'
            },
            title: 'Subjects',
            titleTextStyle: {
              color: '#993300',
              fontName: 'Verdana',
              fontSize: 22
            }
          },
          vAxis: {
            maxValue: 1000,
            textStyle: {
              fontName: 'Verdana',
              color: '#993300'
            },
            title: 'A Quick Basic ChartWrapper Setup from a Remote Google Sheet Source',
            titleTextStyle: {
              color: 'blue',
              fontName: 'Arial',
              fontSize: 16
            }

          }
        };

        function drawChart() {
          chart = new google.visualization.ChartWrapper();
          //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
          //Place your URL within setDataSourceUrl(...HERE...)

          chart.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1_ljk07nqJf_A5tM5BJyVCHTc5Uw8jxBqdCDudJJgvmA/edit#gid=1248768532');

          //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
          chart.setChartType('LineChart');
          chart.setContainerId('chart');
          chart.setOptions(options);
          chart.draw();
        }
      </script>
    </head>

    <body>
      <header>
        <details>
          <summary>
            <p><a href='http://embed.plnkr.co/GKvadm3yOBYHJoOjisWs/'>Snippet</a> and <a href='http://plnkr.co/edit/GKvadm3yOBYHJoOjisWs?p=info'>README.md</a> file available at: Plunker.</p>
            <p><a href='https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject'>ChartWrapper Reference</a>
            </p>
          </summary>
        </details>
      </header>
      <section id="chart"></section>

    </body>

    </html>

＆＃13;

SNIPPET 2

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>G04B32</title>


  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {
      'packages': ['bar']
    });
    google.charts.setOnLoadCallback(drawStuff);

    function drawStuff() {
      var data = new google.visualization.arrayToDataTable([
        ['Opening Move', 'Percentage'],
        ["King's pawn (e4)", 44],
        ["Queen's pawn (d4)", 31],
        ["Knight to King 3 (Nf3)", 12],
        ["Queen's bishop pawn (c4)", 10],
        ['Other', 3]
      ]);

      var options = {
        backgroundColor: {
          fill: 'transparent'
        },
        title: 'Chess opening moves',
        width: 900,
        legend: {
          position: 'none'
        },
        chart: {
          title: 'Chess opening moves',
          subtitle: 'popularity by percentage'
        },
        backgroundColor: {
          fill: 'transparent'
        },
        bars: 'horizontal',
        axes: {
          x: {
            0: {
              side: 'top',
              label: 'Percentage'
            } // Top x-axis.
          }
        },
        bar: {
          groupWidth: "90%"
        }
      };

      var chart = new google.charts.Bar(document.getElementById('top_x_div'));
      chart.draw(data, options);
    };
  </script>
  <style>
    body {
      background: url(http://previews.123rf.com/images/vitalli/vitalli1401/vitalli140100012/25204290-Chessboard-background-texture-Stock-Photo.jpg)no-repeat;
      background-size: cover;
    }
    rect {
      fill: transparent;
    }
  </style>
</head>

<body>
  <div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>

</html>

＆＃13;

Google Charts栏背景颜色不起作用

1 个答案:

SNIPPET 1

SNIPPET 2