Ist es möglich, unterschiedliche Hintergrundfarben für verschiedene Datenzeilen im Google-Balkendiagramm zu verwenden, ohne das Diagramm zu unterbrechen?

Question

Siehe Beispiel-Code:

var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Mac'); 
    data.addColumn('number', 'Score'); 
    data.addColumn({ type: 'string', role: 'style' }); 
    data.addRows([ 
     ['Mac model 12', 200, 'color: #8bba30; opacity: 0.75;'], 
     ['Another Mac Model', 110, 'color: #ffcc33; opacity: 0.75;'], 
    ]); 
    var options = { 
     title: '', 
     width: 500, 
     height: data.getNumberOfRows() * 40 + 100, 
     hAxis: { 
      minValue: 0, 
      maxValue: 255, 
      ticks: [0, 75, 150, 255], 
      textPosition: 'out', 
      side: 'top' 
     }, 
     series: { 
      0: { axis: 'Mac' }, 
      1: { axis: 'Score' } 
     }, 
     chartArea: { 
      top: 0, 
      bottom: 50, 
      right: 50, 
      left: 150 
     }, 
     legend: { position: 'none' }, 
     fontSize: 12, 
     bar: {groupWidth: '75%'}, 
    }; 
    var chart = new google.visualization.BarChart(document.getElementById('apple_div')); 
    chart.draw(data, options); 
} 

Dies ist die Ausgabe:

See, gibt es verschiedene Farben für verschiedene Bars. Aber ich möchte verschiedene Farben und/oder Hintergrundfarben für verschiedene Legenden auf der linken Seite.

Kann mir bitte jemand helfen?

Ich fand folgende Antwort, Is it possible to show each legend in different color in google pie chart.

Aber es schlägt vor, das Diagramm aufzubrechen (d. H., Getrennte Diagramme für jede Reihe zu zeichnen), was nicht wünschenswert ist, da es eine große Anzahl von Reihen gibt.

Answer 1

nicht sicher, was Sie durch bedeuten das Diagramm brechen, aber ...

Sie können das Diagramm svg, sobald die 'ready'-Ereignis ausgelöst ändern.

In diesem Beispiel wird die Farbe des Legendentextes so geändert, dass sie der Balkenfarbe entspricht.

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var colors = ['#8bba30', '#ffcc33']; 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Mac'); 
 
    data.addColumn('number', 'Score'); 
 
    data.addColumn({ type: 'string', role: 'style' }); 
 
    data.addRows([ 
 
    ['Mac model 12', 200, 'color: ' + colors[0] + '; opacity: 0.75;'], 
 
    ['Another Mac Model', 110, 'color: ' + colors[1] + '; opacity: 0.75;'], 
 
    ]); 
 
    var options = { 
 
     title: '', 
 
     width: 500, 
 
     height: data.getNumberOfRows() * 40 + 100, 
 
     hAxis: { 
 
      minValue: 0, 
 
      maxValue: 255, 
 
      ticks: [0, 75, 150, 255], 
 
      textPosition: 'out', 
 
      side: 'top' 
 
     }, 
 
     series: { 
 
      0: { axis: 'Mac' }, 
 
      1: { axis: 'Score' } 
 
     }, 
 
     chartArea: { 
 
      top: 0, 
 
      bottom: 50, 
 
      right: 50, 
 
      left: 150 
 
     }, 
 
     legend: { position: 'none' }, 
 
     fontSize: 12, 
 
     bar: {groupWidth: '75%'}, 
 
    }; 
 

 
    var chartContainer = document.getElementById('apple_div'); 
 
    var chart = new google.visualization.BarChart(chartContainer); 
 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    var labels = chartContainer.getElementsByTagName('text'); 
 
    var colorIndex = 0; 
 
    for (var i = 0; i < labels.length; i++) { 
 
     if (labels[i].getAttribute('text-anchor') === 'end') { 
 
     labels[i].setAttribute('fill', colors[colorIndex]); 
 
     colorIndex++; 
 
     } 
 
    } 
 
    }); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="apple_div"></div>

Wie für die Hintergrundfarbe, SVG elements do not have background
so würden Sie Ihre eigene rect dafür ziehen müssen ...