web-dev-qa-db-fra.com

Graphiques Google - Modifier la couleur de chaque barre

Avec le graphique à barres Google Charts, est-il possible de changer la couleur d'une barre. Par exemple, j'aimerais rendre les données de 2006 rouges (les autres barres sont bleues).

 function drawVisualization() {
            // Create and populate the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');
            data.addColumn('number', 'Sales');

            data.addRows(4);
            data.setValue(0, 0, '2004');
            data.setValue(0, 1, 1000);

            data.setValue(1, 0, '2005');
            data.setValue(1, 1, 1170);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, '2006');
            data.setValue(2, 1, 1400);

            data.setValue(3, 0, '2007');
            data.setValue(3, 1, 1030);


            chart = new google.visualization.BarChart(document.getElementById('visualization'));
            chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
                             });
}
chartsgoogle-visualization
24
FattyPotatoes

Voici un exemple de code qui change la couleur. Notez que l'option "couleurs" accepte un tableau de chaînes.

var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
      colors: ['red','green'],
      is3D:true
};
33
user1586747

Reportez-vous à https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

Vous pouvez ajouter {role: 'style'} à votre tableau de données. Pour toutes les colonnes que vous souhaitez avoir la même couleur, spécifiez simplement un style vide ''. Ensuite, sur la colonne que vous voulez être rouge, vous pouvez simplement spécifier 'rouge' ou '# ff0000' ou 'couleur: rouge', etc.

// example from Google
var data = google.visualization.arrayToDataTable([
    ['Element', 'Density', { role: 'style' }],
    ['Copper', 8.94, '#b87333'],            // RGB value
    ['Silver', 10.49, 'silver'],            // English color name
    ['Gold', 19.30, 'gold'],
    ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
]);
24
Josh Lopez

Comme l'a suggéré Naveen, vous devez ajouter une autre série afin de lui faire utiliser une couleur différente, mais si vous ajoutez isStacked: true à vos options, il dessinera des barres les unes au-dessus des autres plutôt que les unes à côté des autres et ne changera pas leur largeur ou leur alignement, donc ça a l'air bien. Essaye ça:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');
            data.addColumn('number', 'Sales');
            data.addColumn('number', 'SalesMax');

            data.addRows(4);
            data.setValue(0, 0, '2004');
            data.setValue(0, 1, 1000);
            data.setValue(0, 2, 0);

            data.setValue(1, 0, '2005');
            data.setValue(1, 1, 1170);
            data.setValue(1, 2, 0);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, '2006');
            data.setValue(2, 1, 0);
            data.setValue(2, 2, 1400);

            data.setValue(3, 0, '2007');
            data.setValue(3, 1, 1030);
            data.setValue(3, 2, 0);


            var chart = new google.visualization.BarChart(document.getElementById('visualization'));
  chart.draw(data, {isStacked: true, width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                              series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
                             });
} ​
6
Synchro

Vous pouvez toujours insérer une colonne supplémentaire et elle aura donc une couleur différente. C'est tout ce qui peut être fait, je suppose.

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');
            data.addColumn('number', 'Sales');
            data.addColumn('number', 'SalesMax');

            data.addRows(4);
            data.setValue(0, 0, '2004');
            data.setValue(0, 1, 1000);
            data.setValue(0, 2, 0);

            data.setValue(1, 0, '2005');
            data.setValue(1, 1, 1170);
            data.setValue(1, 2, 0);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, '2006');
            data.setValue(2, 1, 0);
            data.setValue(2, 2, 1400);

            data.setValue(3, 0, '2007');
            data.setValue(3, 1, 1030);
            data.setValue(3, 2, 0);


            var chart = new google.visualization.BarChart(document.getElementById('visualization'));
            chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                              series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
                             });
}
3
naveen

série Tableau d'objets, ou objet avec des objets imbriqués

Un tableau d'objets, chacun décrivant le format de la série correspondante dans le graphique. Pour utiliser les valeurs par défaut d'une série, spécifiez un objet vide {}. Si aucune série ou valeur n'est spécifiée, la valeur globale sera utilisée. Chaque objet prend en charge les propriétés suivantes:

color - La couleur à utiliser pour cette série. Spécifiez une chaîne de couleur HTML valide. targetAxisIndex - À quel axe affecter cette série, où 0 est l'axe par défaut et 1 est l'axe opposé. La valeur par défaut est 0; mis à 1 pour définir un graphique où différentes séries sont rendues selon différents axes. Au moins une série doit être allouée à l'axe par défaut. Vous pouvez définir une échelle différente pour différents axes.

visibleInLegend - Une valeur booléenne, où true signifie que la série doit avoir une entrée de légende, et false signifie qu'elle ne doit pas. La valeur par défaut est vraie. Vous pouvez spécifier un tableau d'objets, dont chacun s'applique à la série dans l'ordre indiqué, ou vous pouvez spécifier un objet dans lequel chaque enfant possède une clé numérique indiquant à quelle série il s'applique. Par exemple, les deux déclarations suivantes sont identiques et déclarent la première série noire et absente de la légende, et la quatrième rouge et absente de la légende:

series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}}
1
AFetter

je résout ce problème en utilisant la technique de style de rôle maintenant pour les graphiques qui génèrent des données dynamiques j'ai utilisé une fonction aléatoire pour générer de la couleur

    function random_color_part() {
return str_pad( dechex( mt_Rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT);
}

function random_color() {
return random_color_part() . random_color_part() . random_color_part();
}
then simply
$color=random_color();
print "['$rows[1]',$rows[2],'#$color'],\n";
1
user3226750

Voici un exemple des conseils ci-dessus

google.charts.load('current', { packages: ['corechart', 'bar'] })
google.charts.setOnLoadCallback(drawStacked)

function mt_Rand (min, max) {
  var argc = arguments.length
  if (argc === 0) {
    min = 0
    max = 2147483647
  } else if (argc === 1) {
    throw new Error('Warning: mt_Rand() expects exactly 2 parameters, 1 given')
  }
  return Math.floor(Math.random() * (max - min + 1)) + min
}

function dechex (d) {
  var hex = Number(d).toString(16)
  hex = '000000'.substr(0, 6 - hex.length) + hex
  return hex
}

function str_pad (str) {
  str += ''
  while (str.length < 3) {
    str = str + str
  }
  return str
}

function random_color_part () {
  // return str_pad( dechex( mt_Rand( 0, 255 ) ), 2, '0', 1);
  return mt_Rand(0, 255)
}

function random_color () {
  return 'rgb(' + random_color_part() + ',' + random_color_part() + ',' + random_color_part() + ')'
}

let $color = random_color()
// alert($color);

function drawStacked () {
  // var data = new google.visualization.DataTable();

  var data = google.visualization.arrayToDataTable([
    ['Element', 'Density', { role: 'style' }],
    ['cor-glenio-aleatoria', 8.94, random_color()], // RGB value
    ['cor-arlei-aleatoria', 10.49, random_color()], // English color name
    ['outra cor', 19.30, random_color()],

    ['outra cor fixa', 21.45, 'color: #e5e4e2' ] // CSS-style declaration
  ])

  var options = {
    title: 'Motivation and Energy Level Throughout the Day',
    isStacked: true,
    hAxis: {
      title: 'Time of Day',
      format: 'h:mm a',
      viewWindow: {
        min: [7, 30, 0],
        max: [17, 30, 0]
      }
    },
    vAxis: {
      title: 'Rating (scale of 1-10)'
    }
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'))
  chart.draw(data, options)
}

https://jsfiddle.net/zeh3pn6d/2
0
Arlei F. Farnetani Junior

Je laisse ça ici, au cas où quelqu'un d'autre se heurterait au même problème que moi:

J'ai eu un problème similaire où je ne pouvais pas changer la couleur de barres spécifiques dans un graphique à barres. J'ai fait ce que la documentation disait, et j'ai essayé certaines des réponses ici, mais rien n'a fonctionné.

Il s'est avéré que je devais juste changer google.charts.Bar à google.visualization.ColumnChart.

0
Groom