标签：javascript charts google-visualization bar-chart
我使用Google Visualization API创建了一个谷歌条形图,我正在尝试添加一个用于样式的列.下面是我的实现,使用.addcolumn(),然后将颜色字段添加到每一行,但每个条仍然是默认的蓝色.
<script type="text/javascript">
// Runs onl oad 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是为单个条形图着色的最简单方法.
但是,它不适用于材料图表.
有关选项,请参见示例图表…
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
如果每个条形图必须具有单独颜色的材料图表…
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,charts,google-visualization,bar-chart 来源： https://codeday.me/bug/20190917/1808864.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。