我们如何将下方“已执行”列的默认颜色更改为“绿色”，将“未执行”列的默认颜色更改为“红色”？我尝试使用系列/颜色，但没有成功。
我尝试在选项和下面的 View 中添加颜色参数、系列。没有任何效果。
代码:
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
<script language = "JavaScript">
function drawChart(){
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Status', 'Outcome', { role: 'style' }],
['Executed', 70,'green'],
['Not Executed', 5,'red']
]);
var groupData = google.visualization.data.group(
data,
[{column: 0, modifier: function () {return 'total'}, type:'string'}],
[{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
);
var formatPercent = new google.visualization.NumberFormat({
pattern: '#,##0.0%'
});
var formatShort = new google.visualization.NumberFormat({
pattern: 'short'
});
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
var amount = formatShort.formatValue(dt.getValue(row, 1));
var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
return amount + ' (' + percent + ')';
},
type: 'string',
role: 'annotation'
}]);
var options = { title: 'Google charts', 'legend':'none'};
var chart = new google.visualization.ColumnChart(document.getElementById('container1'));
chart.draw(view, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<table border='1px' cellpadding='5' cellspacing='0' style='border: solid 1px Silver; font-size: x-small;width: 100%'>
<tr align='center' valign='top'>
<td align='center' style='width:100px' valign='center' bgcolor='white'>
<div id="container1" style="width:400; height:280"></div>
</td>
</tr>
</table>
</body>
</html>
我需要做的就是将条形图的蓝色更改为绿色和红色。请检查并提供帮助。
最佳答案
在数据 View 中，需要包含来自数据表的样式 Angular 色的列索引...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, { // <-- include column index 2 for style role
calc: function (dt, row) {
var amount = formatShort.formatValue(dt.getValue(row, 1));
var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
return amount + ' (' + percent + ')';
},
type: 'string',
role: 'annotation'
}]);
请参阅以下工作片段...
google.charts.load('current', {packages: ['corechart']});
function drawChart(){
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Status', 'Outcome', { role: 'style' }],
['Executed', 70,'green'],
['Not Executed', 5,'red']
]);
var groupData = google.visualization.data.group(
data,
[{column: 0, modifier: function () {return 'total'}, type:'string'}],
[{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
);
var formatPercent = new google.visualization.NumberFormat({
pattern: '#,##0.0%'
});
var formatShort = new google.visualization.NumberFormat({
pattern: 'short'
});
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, {
calc: function (dt, row) {
var amount = formatShort.formatValue(dt.getValue(row, 1));
var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
return amount + ' (' + percent + ')';
},
type: 'string',
role: 'annotation'
}]);
var options = { title: 'Google charts', 'legend':'none'};
var chart = new google.visualization.ColumnChart(document.getElementById('container1'));
chart.draw(view, options);
}
google.charts.setOnLoadCallback(drawChart);<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container1"></div>关于javascript - 谷歌图表 API :Set ColumnChart Bar color for individual bars，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57971727/