图例指示器颜色不会随谷歌图表中的条形颜色而变化答案

【问题标题】：legend indicator color not change with bar color in google charts图例指示器颜色不会随谷歌图表中的条形颜色而变化
【发布时间】：2014-03-14 14:43:23
【问题描述】：

我正在使用 Google 图表。我想更改图表中的条形颜色。所以使用系列风格我改变了酒吧的颜色。但同时我也想根据条形颜色更改图例指示器颜色。但我无法更改图例指示器颜色。请帮帮我。

这是图表代码：

 google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart3);
      function drawChart3() {
          var data = google.visualization.arrayToDataTable([
            ['Priority', 'Resolution(%)',{ role: 'annotation' },'ESL(%)',{ role: 'annotation' },{ role: 'style' }],
            ['P1', <%=P1_PERCENT %>,<%=P1_PERCENT%>,95,95,'color: #fcb441' ],
            ['P2', <%=P2_PERCENT%>,<%=P2_PERCENT%>,95,95,'color: #fcb441' ],
            ['P3 & P4', <%=P3_P4_PERCENT%>,<%=P3_P4_PERCENT%>,90,90,'color: #fcb441' ]
            ]);

        var options = {
          tooltip:{textStyle:{fontName:'"Arial"'}},
          title: 'Resolution(Priority Wise)',titleTextStyle:{fontName:'"Arial"'},
          hAxis: {title: 'Priority', titleTextStyle: {color: 'black',fontSize:'15',fontName:'"Arial"'}},
          vAxis: {minValue:0},
          legend:{position: 'bottom'},
          chartArea:{width:'88%'}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('g4'));
        chart.draw(data, options);
      }

我得到这样的图表

【问题讨论】：

图例颜色由系列颜色确定，您可以通过为各个条形设置颜色来覆盖它。如果您希望给定系列的所有条都具有相同的颜色，请设置 colors 或 series.<series index>.color 选项，而不是使用样式列。

标签： google-visualization

【解决方案1】：

正如 @asgallant 在他的评论中解释的那样，如果您希望条形图和图例具有相同的颜色，则必须覆盖默认颜色系列而不是条形图的颜色。为此，请在选项对象中添加 color 属性，该属性将包含您的自定义颜色系列（数组）。在你的情况下：

var options = {
      tooltip:{textStyle:{fontName:'"Arial"'}},
      title: 'Resolution(Priority Wise)',titleTextStyle:{fontName:'"Arial"'},
      hAxis: {title: 'Priority', titleTextStyle: {color: 'black',fontSize:'15',fontName:'"Arial"'}},
      vAxis: {minValue:0},
      legend:{position: 'bottom'},
      chartArea:{width:'88%'},
      colors: ['#fcb441', 'blue']
    };

【讨论】：