图表指标颜色不会随着谷歌图表中的栏颜色而改变 [英] legend indicator color not change with bar color in google charts

问题描述

我正在使用Google图表。我想改变图表中的条形颜色。所以使用系列风格我已经改变了栏的颜色。但是同时我想根据条形颜色更改图例指示符的颜色。但是我无法改变图例指标的颜色。请帮助我。

I am working with Google charts. I wanted to change the bar colors in chart. So using series style I have changed the bar color. But at same time I wanted to change Legend indicator color also as per bar color. But I am unable to change legend indicator color. Please help me.

这里是图表代码：

here is chart code:

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

我得到这样的图表

推荐答案

在他的评论中解释为 @asgallant 时，如果您想为条和图例使用相同的颜色，则必须覆盖默认的颜色系列，而不是酒吧。
为此，请在选项对象中添加将包含自定义颜色系列（数组）的颜色属性。在你的情况下：

As @asgallant explained in his comment, if you want the same colors for the bars and the legend, you have to overwrite the default color series and not the color of the bars. To do this, in the options object, add the color property which will contain your custom color series (array). In your case:

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']
    };

这篇关于图表指标颜色不会随着谷歌图表中的栏颜色而改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！