我使用 Google Visualization API 创建了一个 google 条形图，我正在尝试添加一个将用于样式的列。下面是我使用 .addcolumn() 然后将颜色字段添加到每一行的实现，但是每个条仍然是默认的蓝色。
<script type="text/javascript">
// Runs onload to build the first default chart and load the bar chart package
var jsonCoachCount;
window.onload = function(){
jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"}, {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"Learn@UW"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]');
// Load the Visualization API and the barchart package.
google.charts.load('current', {'packages': ['bar']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
};
function drawChart(){
var servicesData = new google.visualization.DataTable();
servicesData.addColumn('string', 'Service');
servicesData.addColumn('number', 'Number of Coaches');
servicesData.addColumn({type:'string', role:'style'});
for(i = 0; i < jsonCoachCount.length; i++){
tempArray =[];
tempArray.push(String (jsonCoachCount[i]['Name']),
parseInt(jsonCoachCount[i]['Service_Count']),
'color:Red');
servicesData.addRow(tempArray);
}
var options = {
backgroundColor: {
fill: '#E8E4D8'
},
legend: { position: 'none' },
titleTextStyle:{
bold: 'true'
},
chart: {
title: 'Coaches by Service',
subtitle: 'Coaches by Services: From 2016-09-10 until Today'
},
bar: {
groupWidth: '60%'
},
'hAxis': {
textStyle: {
fontSize: 11
}
}
};
var chart = new google.charts.Bar(document.getElementById('servicesChart'));
chart.draw(servicesData, google.charts.Bar.convertOptions(options));
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
</body>
</html>
我不确定我哪里出错了，或者我是否误解了文档的一部分。如果能帮我更改条形图上条形的颜色，我将不胜感激，谢谢!
最佳答案
colors 选项中的每种颜色都应用于数据表中的每个系列/y 轴列。
如果只有一个 y 轴列，则只会应用一种颜色。
否则，一个 Style Column Role是为单个条形着色的最简单方法。
但是，它不适用于 Material 图表。
有关选项，请参阅示例图表...
Chart 1 = Material Chart
Chart 2 = Core Chart
Both built the same way with various style settings
Works on Core, not on Material
如果您认为每个条的颜色都相同...
Chart 3 = Material Chart
Usescolorsconfiguration option to change the color to red
Only one series exists, so accepts only one color
如果您必须有每个 strip 单独颜色的 Material 图表...
Chart 4 = Material Chart
Each value is added as a column, instead of a row, creating multiple series
Usescolorsconfiguration option to change color for each bar
seriesoption can also be used here
However, much harder to work with, noticeSpacercolumn and lack ofhAxislabels...
google.charts.load('current', {
callback: init,
packages: ['bar', 'corechart']
});
function init() {
var jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"}, {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"Learn@UW"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]');
var options = {
backgroundColor: {
fill: '#E8E4D8'
},
legend: { position: 'none' },
titleTextStyle:{
bold: 'true'
},
chart: {
title: 'Coaches by Service',
subtitle: 'Coaches by Services: From 2016-09-10 until Today'
},
bar: {
groupWidth: '60%'
},
hAxis: {
textStyle: {
fontSize: 11
}
}
};
drawChart();
drawSeriesChart();
function drawChart() {
var servicesData = new google.visualization.DataTable();
servicesData.addColumn('string', 'Service');
servicesData.addColumn('number', 'Number of Coaches');
servicesData.addColumn({type:'string', role:'style'});
for (i = 0; i < jsonCoachCount.length; i++) {
var tempArray =[];
var tempColor;
switch (i) {
case 0:
tempColor = 'color:Red';
break;
case 1:
tempColor = 'orange';
break;
case 2:
tempColor = 'fill-color: gold;';
break;
case 3:
tempColor = 'bar {color: green;}';
break;
case 4:
tempColor = 'bar {fill-color: blue;}';
break;
default:
tempColor = 'bar {fill-color: cyan; stroke-color: black; stroke-width: 4;}';
}
tempArray.push(
String (jsonCoachCount[i]['Name']),
parseInt(jsonCoachCount[i]['Service_Count']),
tempColor
);
servicesData.addRow(tempArray);
}
var chart = new google.charts.Bar(document.getElementById('servicesChart1'));
chart.draw(servicesData, google.charts.Bar.convertOptions(options));
var chart = new google.visualization.ColumnChart(document.getElementById('servicesChart2'));
chart.draw(servicesData, options);
// only one series exists -- only one color will work
options.colors = ['red'];
var chart = new google.charts.Bar(document.getElementById('servicesChart3'));
chart.draw(servicesData, google.charts.Bar.convertOptions(options));
}
function drawSeriesChart() {
var servicesData = new google.visualization.DataTable();
servicesData.addColumn('string', 'Service');
for (i = 0; i < jsonCoachCount.length; i++) {
servicesData.addColumn('number', String (jsonCoachCount[i]['Name']));
servicesData.addColumn('number', 'Spacer');
}
var tempArray = [];
tempArray.push('Number of Coaches');
for (i = 0; i < jsonCoachCount.length; i++) {
tempArray.push(parseInt(jsonCoachCount[i]['Service_Count']));
tempArray.push(null);
}
servicesData.addRow(tempArray);
options.colors = [
'deeppink',
'red',
'orange',
'gold',
'green',
'blue',
'indigo',
'purple',
'violet',
'pink'
];
var chart = new google.charts.Bar(document.getElementById('servicesChart4'));
chart.draw(servicesData, google.charts.Bar.convertOptions(options));
}
}div {
padding: 2px 0px 2px 0px;
font-weight: bold;
}
.code {
background-color: lightgray;
font-family: Courier New;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>1. Material Chart</div>
<div id="servicesChart1"></div>
<div>2. Core Chart</div>
<div id="servicesChart2"></div>
<div>3. Material Chart with <span class="code">colors: ['red']</span></div>
<div id="servicesChart3"></div>
<div>4. Multi-Series Material Chart</div>
<div id="servicesChart4"></div>关于javascript - Google 条形图无法更改单个条形图的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36437422/