Question

这里是我的代码，到目前为止图表背景颜色有什么问题......

我知道其他一切都有效，但我无论如何也无法改变背景颜色。我一直在看文档，我不断得出同样的结论......没什么。

代码本身检索所有指定的变量，构建图表并更改** HTML背景，但无法接收图表背景颜色更改

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <?php echo "<style> body, div {background-color: #".$_GET['color']."} </style>"?>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);


      var goal = <?php echo $_GET['goal']; ?>;
      var complete = <?php echo $_GET['complete']; ?>;
      var dmr = <?php echo $_GET['dmr']; ?>;
      var wysb = <?php echo $_GET['wysb']; ?>;
      function drawStuff() {

        var data = new google.visualization.arrayToDataTable([
          ['Type', 'Quantity:'],
          ["Goal", goal],
          ["Complete", complete],
          ["DMR", dmr],
          ["W.Y.S.B.", wysb],
        ]);

        var options = {
          title: 'Productivity Monitor',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Productivity Monitor',
                   subtitle: 'Comparative Chart with color indicator background' },
          bars: 'horizontal', // Required for Material Bar Charts.
          backgroundColor :{fill : '<?php echo "#".$_GET["color"]; ?>' },
          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

使用此：

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

而不是：

chart.draw(data, options);

来自https://developers.google.com/chart/interactive/docs/gallery/barchart：

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

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

chart.draw（数据，选项）;

......用这个：

chart.draw（data，google.charts.Bar.convertOptions（options））;

如何更改谷歌图表API的背景颜色，我做错了什么

1 个答案: