javascript - periodo - graficos combinados en drive
El gráfico de barras de Google no puede cambiar el color de la barra individual (1)
cada color en la opción de
colors
se aplica a cada columna de serie / eje y en la tabla de datos.
Si solo hay una columna del eje y, solo se aplicará un color.
De lo contrario, un
Rol de columna de estilo
es la forma más fácil de colorear una barra individual.
Sin embargo, no funciona en gráficos de materiales.
Para ver opciones, consulte los gráficos de ejemplo ...
Gráfico 1 = Gráfico de materiales
Gráfico 2 = Gráfico principal
Ambos construidos de la misma manera con varias configuraciones de estilo
Funciona en Core, no en Material
Si está bien con cada barra del mismo color ...
Gráfico 3 = Gráfico de materiales
Utiliza la opción de configuración decolorspara cambiar el color a rojo
Solo existe una serie, por lo que acepta solo un color
Si debe tener una tabla de materiales con colores separados para cada barra ...
Gráfico 4 = Gráfico de materiales
Cada valor se agrega como una columna, en lugar de una fila, creando múltiples series
Utiliza la opción de configuración decolorspara cambiar el color de cada barra
seriesopción deseriestambién se puede usar aquí
Sin embargo, es mucho más difícil trabajar con él, observe la columnaSpacery la falta de etiquetashAxis...
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>
He creado un gráfico de barras de Google utilizando la API de visualización de Google y estoy tratando de agregar una columna que se utilizará para el estilo. Aquí está mi implementación a continuación usando .addcolumn () y luego agregando el campo de color a cada fila, sin embargo, cada barra sigue siendo el color azul predeterminado.
<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>
No estoy seguro de dónde me estoy equivocando o si he entendido mal una parte de la documentación. Agradecería ayuda para cambiar el color de las barras en mi gráfico de barras, ¡gracias!