Google Bar Chart不能更改单个栏的颜色 [英] Google Bar Chart cannot Change Individual Bar Color
本文介绍了Google Bar Chart不能更改单个栏的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Google Visualization API创建了一个谷歌条形图，我试图添加一个将用于样式的列。以下是使用.addcolumn（）在下面的实现，然后将颜色字段添加到每一行，但每个小节仍然是默认的蓝色。
< script type =text / javascript>
//运行onload生成第一个默认图表并加载条形图包
var jsonCoachCount;
window.onload = function（）{
jsonCoachCount = JSON.parse（'[{Service_Count：4，Name：其他}，{Service_Count：4 ，Name：Campus Network}，{Service_Count：3，Name：Learn @ UW}，{Service_Count：2，Name {Service_Count：1，Name：Blackboard Collaborate}，{Service_Count：1，Name：Office 365}，{Service_Count：1 ：多个}，{Service_Count：1，Name：Office-ionado}，{Service_Count：1，Name：Case Notes}，{Service_Count 1， 名称： RESNET}]'）;
//加载可视化API和条形图包。
google.charts.load（'current'，{'packages'：['bar']}）;
//设置回调以在加载Google Visualization API时运行。
google.charts.setOnLoadCallback（drawChart）;
};
函数drawChart（）{
var servicesData = new google.visualization.DataTable（）;
servicesData.addColumn（'string'，'Service'）;
servicesData.addColumn（'数字'，'教练人数'）;
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'
}，
图：{
title：'Coaches by Service'，
subtitle ：'教练服务：从2016-09-10直到今天'
}，
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 / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script>
< / head>
< body>
< / body> ;
< / html>
我不确定我要错的地方，或者我误解了一条文档。我希望能帮助我改变条形图上条的颜色，谢谢！
样式列角色是为单个条形变色的最简单方法。但是，它不适用于材料图表。
$ b
图表1 =材料图表
图表2 =核心图表
两种类型的构建方式都与各种样式设置相同 -
适用于Core，而不是材质
如果每个酒吧的颜色都是相同的......
图3 =材料图
使用颜色配置选项将颜色更改为红色
仅存在一个系列，所以只接受一种颜色
如果您必须为每个栏使用不同颜色的材质图......
图表4 =材料图 -
每个值都作为一列而不是一行添加，创建多个系列
颜色配置选项可更改每个栏的颜色
系列选项也可以在此使用<
然而，更难以工作的机智h，请注意Spacer栏和缺少hAxis标签...
google.charts.load（'current'，{callback：init，packages：[ 'bar'，'corechart']}）;函数init（）{var jsonCoachCount = JSON.parse（'[{Service_Count：4，Name：Other}，{Service_Count ，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 ：Multiple}，{Service_Count：1，Name：Office-ionado}，{Service_Count：1，Name：Case Notes}，{Service_Count ： 1， 名称： RESNET}]'）; var options = {backgroundColor：{fill：'＃E8E4D8'}，legend：{position：'none'}，titleTextStyle：{bold：'true'}，chart：{title：'Coaches by Service'，subtitle：'Coaches通过服务：从2016-09-10直到今天'}，酒吧：{groupWidth：'60％'}，hAxis：{textStyle：{fontSize：11}}}; drawChart（）; drawSeriesChart（）;函数drawChart（）{var servicesData = new google.visualization.DataTable（）; servicesData.addColumn（'string'，'Service'）; servicesData.addColumn（'number'，'教练人数'）; servicesData.addColumn（{type：'string'，role：'style'}）; for（i = 0; i< jsonCoachCount.length; i ++）{var tempArray = []; var tempColor;开关（i）{情况0：tempColor ='颜色：红色';打破;情况1：tempColor ='orange';打破;情况2：tempColor ='fill-color：gold;';打破;情况3：tempColor ='bar {color：green;}';打破;情况4：tempColor ='bar {fill-color：blue;}';打破;默认：tempColor ='bar {fill-color：cyan;笔画颜色：黑色; 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）; //只有一个系列存在 - 只有一种颜色可以使用options.colors = ['red']; var chart = new google.charts.Bar（document.getElementById（'servicesChart3'））; chart.draw（servicesData，google.charts.Bar.convertOptions（options））; }函数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（'教练人数'）; 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 >< /脚本>< DIV大于1。材料表< / div>< div id =servicesChart1>< / div>< div> 2。 Core Chart< / div>< div id =servicesChart2>< / div>< div> 3。包含< span class =code>颜色的材质表：['red']< / span>< / div>< div id =servicesChart3>< / div>< div> 4 。 Multi-Series Material Chart< / div>< div id =servicesChart4>< / div>
I've created a google bar chart using the Google Visualization API and I'm trying to add a column which will be used for style. Here's my implementation below using the .addcolumn() and then adding the color field to each row, however each bar is still the default blue color.
<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>
I'm not sure where I'm going wrong or if I've misunderstood a piece of the documentation. I'd appreciate help for changing the color of the bars on my bar chart, thanks!
解决方案
A Style Column Role is the easiest way to color an individual bar.
However, it does not work on Material Charts.
For options, see example charts...
Chart 1 = Material Chart
Chart 2 = Core Chart
Both built the same way with various style settings
Works on Core, not on Material
If you are fine with each bar being the same color...
Chart 3 = Material Chart
Usescolorsconfiguration option to change the color to red
Only one series exists, so accepts only one color
If you must have Material Chart with separate colors for each bar...
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>
这篇关于Google Bar Chart不能更改单个栏的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
