Couleur dans les barres de graphique chronologique de Google en fonction de la valeur spécifique
Je voudrais créer des groupes de couleurs pour les barres. L'exemple ci-dessous est raw. Je voudrais ajouter une colonne avec un type de catégorie, et sur la base de la catégorie, je vais la couleur de la barre.
Quelque chose comme:
Colonne
dataTable.addColumn({ type: 'string', id: 'Category' });
Ligne
[ 'GROUP #1', 'CategoryA', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1), new Date(2014, 3, 15) ],
[ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21), new Date(2014, 2, 19) ],
[ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1), new Date(2014, 0, 15) ],
[ 'GROUP #2', 'CategoryC', 'C00005', new Date(2014, 2, 8), new Date(2014, 2, 15) ],
[ 'GROUP #3', 'CategoryC', 'C00006', new Date(2014, 5, 1), new Date(2014, 5, 15) ],
[ 'GROUP #4', 'CategoryA', 'C00007', new Date(2014, 1, 15), new Date(2014, 1, 25) ]]);
Basé sur la Catégorie de la barre doit avoir une couleur spécifique.
google.load("visualization", "1", {packages: ["timeline"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'ID' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'GROUP #1', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'C00003', new Date(2014, 3, 1), new Date(2014, 3, 15) ],
[ 'GROUP #1', 'C00003', new Date(2014, 0, 21), new Date(2014, 2, 19) ],
[ 'GROUP #1', 'C00004', new Date(2014, 0, 1), new Date(2014, 0, 15) ],
[ 'GROUP #2', 'C00005', new Date(2014, 2, 8), new Date(2014, 2, 15) ],
[ 'GROUP #3', 'C00006', new Date(2014, 5, 1), new Date(2014, 5, 15) ],
[ 'GROUP #4', 'C00007', new Date(2014, 1, 15), new Date(2014, 1, 25) ]]);
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options = {
timeline: {
groupByRowLabel: true,
rowLabelStyle: {
fontName: 'Roboto Condensed',
fontSize: 14,
color: '#333333'
},
barLabelStyle: {
fontName: 'Roboto Condensed',
fontSize: 14
}
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%'
};
chart.draw(dataTable, options);
}
source d'informationauteur Khrys
Vous devez vous connecter pour publier un commentaire.
Il n'y a rien dans le Scénario de visualisation qui va le faire pour vous, mais vous pouvez définir la
colors
option à tout ce que vous avez besoin pour obtenir les bars de la bonne couleur. Vous pouvez analyser la DataTable pour construire le tableau de couleurs, et ensuite utiliser un DataView pour cacher votre catégorie de la colonne à partir de la ligne de temps (depuis la Timeline ne sais pas quoi faire avec elle). Voici un exemple:Le constater ici: http://jsfiddle.net/asgallant/7A88H/
Utiliser les sans-papiers "style" rôle comme dans mon exemple:
http://jsfiddle.net/af8jq9aa/1/
Vous devez utiliser l'option:
À partir de google docs: timeline.colorByRowLabel par défaut la valeur booléenne false
Si défini à true, les couleurs chaque barre sur la ligne même. La valeur par défaut est d'utiliser une couleur pour chaque barre de l'étiquette.
J'ai fait comme ça, sa fonctionne très bien pour moi.