legend indicator color not change with bar color i

2019-06-16 05:48发布

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

I am getting chart like this

Result chart

1条回答
小情绪 Triste *
2楼-- · 2019-06-16 06:31

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']
    };
查看更多
登录 后发表回答