javascript - 是否可以为 Google 条形图中的不同数据行设置不同的图例背景颜色，而不破坏图表？

Question

查看示例代码:

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);
}

这是输出:

看，不同的栏有不同的颜色。但我想要左侧不同图例的不同颜色和/或背景颜色。

有人可以帮我解决这个问题吗？

我找到了以下答案，Is it possible to show each legend in different color in google pie chart .

但它建议分解图表(即为每一行绘制单独的图表)，这是不可取的，因为有大量的行。

Answer 1

不确定破坏图表是什么意思，但是...

一旦 'ready' 事件触发，您就可以修改图表 svg。

此示例更改图例文本的颜色以匹配条形颜色。

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>

至于背景颜色，SVG elements do not have background
所以你必须为此绘制自己的矩形...