Question

嗯，这个文档看起来很清楚，但我似乎无法正确更改图表中条形的颜色。必须有一些我不知道的明显的东西....这就是我现在正在做的事情：

<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.            
            }
          }
        };

Answer 1

这是如何改变图形的颜色

id

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

中添加此color选项

在你的情况下

options

如果你在ur图表中有两个条形，那么就像这样var options = { width: 700, colors: ['#2980b9'], ..... .....

Answer 2

您在问题中发布的代码可以通过一些简单的更改正常工作：

在此脚本标记中：

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

将'packages':['bar']更改为＆＃39;包＆＃39;：[＆＃39;核心图表＆＃39;]

在这一行：

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

请注意，常规Google图表不支持字幕，因此我将字幕留在上面发布的选项代码中。

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

<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

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

Google Charts - 无法获取柱形图格式

2 个答案: