webentwicklung-frage-antwort-db.com.de

Google Chart, unterschiedliche Farbe für jeden Balken

Ich habe dieses Google Balkendiagramm:

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '');
    data.addColumn('number', '');
    data.addRows(2);
    data.setValue(0, 0, 'Value 1');
    data.setValue(0, 1, 250);
    data.setValue(1, 0, 'Value 2');
    data.setValue(1, 1, 100);

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, {
        width: 400, 
        height: 175, 
        title: 'Total',
        legend: 'none',
    });
  }

Alles läuft in Ordnung, aber die Sache ist, beide Balken haben die gleiche Farbe, und ich würde gerne verschiedene Farben für jeden Balken haben.

Kann mir da jemand weiterhelfen?

13
jaclerigo

Eine harte Art, Dinge zu tun, besteht darin, sie alle in dieselbe Zeile zu setzen, und die API würde diesem eindeutige Farben zuweisen. Also für dein Beispiel

function drawChart(){

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Value 1');
    data.addColumn('number', 'Value 2');
    data.addRows(2);
    data.setValue(0, 0, 250);
    data.setValue(0, 1, 100);

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));

    chart.draw(data, {
        width: 600, 
        height: 175, 
        title: 'Total',
        legend: 'none',
    });
} 

Wenn Sie Ihre eigenen Farben benötigen, fügen Sie dies in die Optionen chart.draw wie ein.

colors: ['red','yellow', 'blue'],

Wenn es jedoch zu viele Bars gibt, ist dies möglicherweise eine schlechte Option

http://code.google.com/apis/chart/interactive/docs/reference.html#barformatter

12

Nicht sicher, warum niemand Stilspalten erwähnt hat - ich gehe davon aus, dass sie nach der ersten Frage hinzugefügt wurden, aber für jeden, der dies sucht, ist ein besserer Weg:

function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', '');
        data.addColumn({ type: 'string', role: 'style' });

        data.addRows(2);

        data.setValue(0, 0, 'Value 1');
        data.setValue(0, 1, 250);
        data.setValue(0, 2, 'rgb(200, 20, 60)');
        data.setValue(1, 0, 'Value 2');
        data.setValue(1, 1, 100);
        data.setValue(1, 2, 'rgb(20, 200, 60)');

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {
                width: 400, 
                height: 175, 
                title: 'Total',
                legend: 'none',
        });
    }

Sie können viele andere CSS-Stile festlegen, um Ihre Diagramme WIRKLICH hässlich zu machen.

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

Beachten Sie, dass die von rgba () angegebenen Farben anscheinend nicht unterstützt werden. Sie müssen die Deckkraft für die Stilrolle festlegen.

Hier ist eine Geige:

http://jsfiddle.net/a1og7rq4/

SIDENOTE: Wenn Sie mehrere Serien haben, benötigen Sie nach jeder Seriendatenspalte eine Stilrollenspalte.

Hier ist eine weitere Geige, die dies zeigt (auch mit Deckkraft): http://jsfiddle.net/v5hfdm6c/1

Hier ist die modifizierte Funktion (die unmodifizierte oben zur besseren Übersicht oben gelassen)

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', '');
data.addColumn({ type: 'string', role: 'style' });
data.addColumn('number', '');
data.addColumn({ type: 'string', role: 'style' });

data.addRows(2);

var i = 0;
data.setValue(0, i++, 'Value 1');
data.setValue(0, i++, 200);
data.setValue(0, i++, 'color:rgb(200, 20, 60); opacity:0.5');
data.setValue(0, i++, 250);
data.setValue(0, i++, 'rgb(200, 20, 60)');

i = 0;
data.setValue(1, i++, 'Value 2');
data.setValue(1, i++, 120);
data.setValue(1, i++, 'color:rgb(20, 200, 60); opacity:0.5');
data.setValue(1, i++, 100);
data.setValue(1, i++, 'rgb(20, 200, 60)');

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
    width: 400, 
    height: 175, 
    title: 'Total',
    legend: 'none',
});

}

14
Whelkaholism

Genau das Attribut colors muss in die optionsvariable eingefügt werden.

...

var options = {
    width: 600, 
    height: 175, 
    title: 'Total',
    legend: 'none',
    colors: ['red', 'green']
};

chart.draw(data, options);
...
10
mpous

Bitte fügen Sie dies in Optionen hinzu:

colors:['red','#009900']

Mögen:

var options = {
          title: 'Company Performance',
          vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}},
          colors:['red','#009900']
};
3

Für diejenigen, die Kreisdiagramm verwenden: 

Fügen Sie die slices hinzu

// Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300,
                    slices: {
                        0: { color: 'yellow' },
                        1: { color: 'transparent' }
                      }
                  };
0
JMASTER B

Hier ist meine Antwort. Es kümmert sich um die Konvertierung eines Arrays in dataTable

function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Season');
        data.addColumn('number', 'Deaths');
        data.addColumn({
            type: 'string',
            role: 'style'
        });

        var dataArray = new Array();
        dataArray[0] = ['Season 1', 1000, "#A0A0A0"]
        dataArray[1] = ['Season 2', 1170, "#FF3344"]
        dataArray[2] = ['Season 3', 660, "#BCBCBC"]
        dataArray[3] = ['Season 4', 1248, "#B3B3B8"]
        dataArray[4] = ['Season 5', 14353, "RED"];

        var charTitle = "Total deaths in Game of Thrones Series VS Screen Play Time";
        var noOfBars = dataArray.length;

        data.addRows(noOfBars);

        for (var row = 0; row < noOfBars; row++) {
            var label=dataArray[row][0];
            var value=dataArray[row][1];
            var color=dataArray[row][2];
                data.setValue(row, 0, label);
                data.setValue(row, 1, value);
                data.setValue(row, 2, color);
        }



    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, {
        width: 600,
        height: 300,
        title: charTitle,
    });
}

google.load("visualization", "1", {
    packages: ["corechart"],
    callback: function () {
        drawChart();
    }
});
0
Sujal Mandal