谷歌图表-无法将柱状图格式化

Google Charts - Cannot get column chart to format

本文关键字：格式化 谷歌      更新时间：2023-09-26

Ugh，这方面的文档似乎非常清晰，但我似乎无法正确更改图表中条形图的颜色。肯定有一些明显的东西我错过了。。。。以下是我目前正在使用的内容：

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
       <div id="dual_y_div" style="width: 700px; height: 500px;"></div>
         
<script>
    google.setOnLoadCallback(drawStuff);
    function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
           ["Companies", "Acres", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
        ]);
        var options = {
          width: 700,
          height: 500,
          chart: {
            title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
            subtitle: 'updated December 15, 2015'
          },
          series: {
            0: { axis: 'Acres' }, // Bind series 0 to an axis named 'distance'.           
          },
          axes: {
            y: {
              Acres: {label: 'Acres'}, // Left y-axis.            
            }
          }
        };
      var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
      chart.draw(data, options);
    };
</script>

在我看来，我已经定义了角色，并按照文档上显示的方式设置了颜色的格式，但我仍然有所有的蓝色（默认）条颜色。

[！[蓝条截图][1]][1]

所以，是的，就是这样。我搞砸了什么？

一如既往，SO社区，感谢您的时间、关注和专业知识。

CDM-

更新：

所以现在我在这里，但仍然有蓝色条：

function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
           ["Companies", "Acres", { role: "style" } ],
        ["Conoco", 8.94, "#b87333"],
        ["Tesla", 10.49, "silver"],
        ["Texaco", 19.30, "gold"],
        ["Yahoo.com", 21.45, "color: #e5e4e2"]
        ]);
        var options = {
          width: 700,
          chart: {
            title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
            subtitle: 'updated December 15, 2015'
          },
          series: {
            0: { axis: 'Acres' }, // Bind series 0 to an axis named 'Acres'.           
          },
          axes: {
            y: {
              Acres: {label: 'Acres'}, // Left y-axis.            
            }
          }
        };

您在问题中发布的代码只需进行一些简单的更改即可正常工作：

在此脚本中标记：

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>

将'packages':['bar']更改为"packages"：["rechart"]

在这一行：

var chart = new google.charts.Bar(document.getElementById('dual_y_div'));

将google.charts.Bar更改为google.visualization.ColumnChart

并更改此选项代码：

var options = {
  width: 700,
  chart: {
    title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
    subtitle: 'updated December 15, 2015'
  },
  series: {
    0: { axis: 'Acres' }, // Bind series 0 to an axis named 'Acres'.           
  },
  axes: {
    y: {
      Acres: {label: 'Acres'}, // Left y-axis.            
    }
  }
};

相反：

var options = {
  title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
  legend: {
    position: 'none'
  },
  hAxis: {
    title: 'Companies'
  },
  vAxis: {
    title: 'Acres'
  }
};

JS Fiddle

请注意，常规的谷歌图表不支持字幕，所以这就是为什么我在上面发布的选项代码中省略了字幕。

谷歌材料图表支持字幕，但它们将颜色应用于图表中的每个系列数据，而不是应用于系列中的每个值。以下是使用材料图表的完整代码：

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="dual_y_div" style="width: 700px; height: 500px;"></div>
<script>
  google.setOnLoadCallback(drawStuff);
  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ["Companies", "Acres1", "Acres2", "Acres3", "Acres4"],
      ["Conoco", 8.94, 10.21, 5.67, 14.53],
      ["Tesla", 10.49, 16.32, 20.15, 13.49],
      ["Texaco", 19.30, 17.10, 15.23, 25.37],
      ["Yahoo.com", 21.45, 22.32, 18.19, 27.43]
    ]);
    var options = {
      chart: {
        title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
        subtitle: 'updated December 15, 2015'
      },
      legend: {
        position: 'none'
      },
      colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
      series: {
        0: { axis: 'Acres' },
        1: { axis: 'Acres' },
        2: { axis: 'Acres' },
        3: { axis: 'Acres' }
      },
      axes: {
        y: {
          Acres: {label: 'Acres'}, // Left y-axis.            
        }
      }
    };
    var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
      chart.draw(data, options);
  };
</script>

JS Fiddle

我还没有找到一种方法来更改一个系列中每个值的材质图上显示的颜色。因此，看起来你必须在省略字幕并按照你想要的方式使用图表颜色之间做出选择，或者通过使用材质图来包括字幕，但使系列中每个值的颜色相同。

这就是你如何更改图形的颜色

var options = {
            colors: ['#2980b9']
        };

在您的options变量中添加此color选项

在您的情况下是

var options = {
      width: 700,
      colors: ['#2980b9'],
      .....
      .....

如果你的图表中有两个条形图，那么就这样做colors: ['#0d6957','#1fb89a']

相关文章：