是否可以在不破坏图表的情况下为 Google 条形图中的不同数据行设置不同的图例背景颜色? [英] Is it possible to have different legend background colors for different data rows in Google bar chart, without breaking the chart?

问题描述

查看示例代码:

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

这是输出:

看，不同的条有不同的颜色.但我希望左侧不同的图例具有不同的颜色和/或背景颜色.

See, there are different colors for different bars. But I want different color and/or background-color for different legends on left side.

有人可以帮我吗?

我找到了以下答案，是否可以在谷歌饼图中以不同颜色显示每个图例.

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

But it suggests on breaking down the chart(i.e. to draw separate charts for each rows), which is not desirable as there are large numbers of rows.

推荐答案

不知道打破图表是什么意思，但是...

Not sure what you mean by breaking the chart, but...

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

You can modify the chart svg, once the 'ready' event fires.

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

This example changes the color of the legend text to match the bar color.

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 元素没有背景
所以你必须为此绘制自己的 rect...

这篇关于是否可以在不破坏图表的情况下为 Google 条形图中的不同数据行设置不同的图例背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！