webentwicklung-frage-antwort-db.com.de

Google Charts - Ändern Sie die Farbe der einzelnen Balken

Mit dem Balkendiagramm von Google Charts kann die Farbe eines Balkens geändert werden. Zum Beispiel möchte ich die 2006-Daten rot machen (andere Balken sind blau).

 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'}}
                             });
}
24
FattyPotatoes

Hier ist ein Codebeispiel, das die Farbe ändert. Beachten Sie, dass die Option "Farben" eine Reihe von Zeichenfolgen akzeptiert.

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

Siehe https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

Sie können Ihrer Datentabelle {role: 'style'} hinzufügen. Geben Sie für alle Spalten, die dieselbe Farbe haben sollen, einfach einen leeren Stil "" an. Dann können Sie in der Spalte, die rot sein soll, einfach "rot" oder "# ff0000" oder "Farbe: rot" usw. angeben.

// 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

Wie Naveen vorgeschlagen hat, sollten Sie eine weitere Serie hinzufügen, um die Farbe zu ändern. Wenn Sie jedoch isStacked: true Nach Ihren Wünschen werden Balken übereinander anstatt nebeneinander gezeichnet, und ihre Breite oder Ausrichtung wird nicht geändert, sodass sie gut aussehen. Versuche dies:

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

Sie können jederzeit eine zusätzliche Spalte einfügen, damit diese eine andere Farbe hat. Das ist alles, was ich tun kann.

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

series Array von Objekten oder Objekt mit verschachtelten Objekten

Ein Array von Objekten, die jeweils das Format der entsprechenden Reihe im Diagramm beschreiben. Um Standardwerte für eine Serie zu verwenden, geben Sie ein leeres Objekt an {}. Wenn eine Reihe oder ein Wert nicht angegeben ist, wird der globale Wert verwendet. Jedes Objekt unterstützt die folgenden Eigenschaften:

color - Die für diese Serie zu verwendende Farbe. Geben Sie eine gültige HTML-Farbzeichenfolge an. targetAxisIndex - Welche Achse soll dieser Reihe zugewiesen werden, wobei 0 die Standardachse und 1 die Gegenachse ist. Standardwert ist 0; Auf 1 setzen, um ein Diagramm zu definieren, in dem verschiedene Reihen für verschiedene Achsen gerendert werden. Der Standardachse muss mindestens eine Serie zugeordnet sein. Sie können für verschiedene Achsen einen unterschiedlichen Maßstab definieren.

visibleInLegend - Ein boolescher Wert, bei dem true bedeutet, dass die Serie einen Legendeneintrag haben soll, und false bedeutet, dass dies nicht der Fall ist. Standard ist wahr. Sie können entweder ein Array von Objekten angeben, von denen jedes in der angegebenen Reihenfolge für die Serie gilt, oder Sie können ein Objekt angeben, bei dem jedes untergeordnete Objekt über einen numerischen Schlüssel verfügt, der angibt, für welche Serie es gilt. Die folgenden zwei Deklarationen sind beispielsweise identisch und deklarieren die erste Reihe als schwarz und in der Legende nicht vorhanden und die vierte als rot und in der Legende nicht vorhanden:

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

ich löse dieses Problem mithilfe der Rollenstil-Technik für Diagramme, die dynamische Daten generieren. Ich habe eine Zufallsfunktion verwendet, um Farben zu generieren

    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

Hier ist ein Beispiel für die obigen Tipps

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

Lassen Sie dies hier, falls jemand anderes auf dasselbe Problem stößt wie ich:

Ich hatte ein ähnliches Problem, bei dem ich die Farbe bestimmter Balken in einem Balkendiagramm nicht ändern konnte. Ich habe getan, wie in der Dokumentation angegeben, und einige der Antworten hier ausprobiert, aber nichts hat funktioniert.

Es stellte sich heraus, dass ich nur google.charts.Bar In google.visualization.ColumnChart Ändern musste.

0
Groom