个人中心
gpt4 book ai didi

javascript - 谷歌图表栏背景颜色不起作用

转载 作者：行者123 更新时间：2023-11-30 15:40:50 25 4
gpt4 key购买 nike

我想要做的就是将背景颜色更改为透明，但无论我在(太棒了!...)文档中的任何地方看到的选项组合如何，我什至根本无法更改颜色。 

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

最佳答案

在options当然对于经典 GViz:

backgroundColor: {fill:'transparent'},

如果您使用的是 Material 测试版，这将不起作用

但以下内容适用于 Classic 和 Materials

  1. 制作 <style>在 </head> 的结束标记处阻止
  2. 添加此规则集:
 rect {
       fill:transparent;
   }

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

The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.

Also, the way options are declared is not finalized, so you must convert your options by replacing this line:

chart.draw(data, options);

...with this:

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

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

片段 1

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

片段 2

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

关于javascript - 谷歌图表栏背景颜色不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40853291/

25 4 0
文章推荐： javascript - Google 跟踪代码管理器 - dataLayer 具有先前的值
文章推荐： c - glTranslatef 放置问题
文章推荐： c - 在c中对字符进行分组以形成字符串
文章推荐： javascript - Github API 列出来源存储库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com