我正在使用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);
}
我得到这样的图表
答案 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']
};