在谷歌图表中,图例指示符颜色不会随条形颜色而变化

时间:2014-03-14 14:43:24

标签: google-visualization

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

这是图表代码:

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

我得到这样的图表

Result chart

1 个答案:

答案 0 :(得分:20)

正如 @asgallant 在评论中解释的那样,如果您想要条形图和图例的相同颜色,则必须覆盖默认颜色系列而不是条形图的颜色。 为此,请在options对象中添加将包含自定义颜色系列(数组)的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']
    };