如何使用Google图表更改图例中的背景颜色？

Question

我当前的图例代码为：

legend: {
            position: 'top',
            maxLines: 3,
            textStyle: {
                color: '#969696',
            },
        },

一个我希望它看起来像的例子：

我似乎找不到如何设置图例中每个元素的背景颜色。

*编辑

当前看起来像这样：

使用：

        var options = {
          colors: ['#ee7200', '#d6550d', '#f7380c', '#871c03']
        }

*我似乎无法为google-charts-api或google-charts添加标签

Answer 1

没有用于设置单个图例条目背景颜色的标准配置选项。
您将需要在图表的<svg>事件上手动修改图表的'ready'。

有关示例，请参见以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols":[
      {"label": "Month", "type": "string"},
      {"label": "First Approach", "type": "number"},
      {"label": "Follow Up", "type": "number"},
      {"label": "Email or Call", "type": "number"},
      {"label": "Meeting Confirmation", "type": "number"}
    ],
    "rows":[
      {"c": [{"v": "Jan"}, {"v": 4}, {"v": 3}, {"v": 7}, {"v": 8}]},
      {"c": [{"v": "Feb"}, {"v": 5}, {"v": 4}, {"v": 8}, {"v": 9}]},
      {"c": [{"v": "Mar"}, {"v": 6}, {"v": 5}, {"v": 9}, {"v": 4}]}
    ]
  });

  var options = {
    backgroundColor: 'transparent',
    chartArea: {
      backgroundColor: 'transparent',
      bottom: 32,
      height: '100%',
      left: 32,
      right: 16,
      top: 32,
      width: '100%'
    },
    colors: ['#ee7200', '#d6550d', '#f7380c', '#871c03'],
    hAxis: {
      textStyle: {
        color: '#ffffff',
      }
    },
    height: '100%',
    legend: {
      position: 'top',
      maxLines: 3,
      textStyle: {
        color: '#ffffff',
      }
    },
    vAxis: {
      textStyle: {
        color: '#ffffff',
      }
    },
    width: '100%'
  };

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

  // chart ready event
  google.visualization.events.addListener(chart, 'ready', function () {
    // get svg namespace
    var svg = container.getElementsByTagName('svg')[0];
    var svgNS = svg.namespaceURI;

    // save legend labels to use size later
    var legend = [];
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      // legend labels will be first in dom, ignore other labels
      if (legend.length >= (data.getNumberOfColumns() - 1)) {
        return;
      }

      // bring legend label to front
      label.setAttribute('id', 'legend-' + legend.length);
      var link = document.createElementNS(svgNS, 'use');
      link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#legend-' + legend.length);
      svg.appendChild(link);

      // save label
      legend.push(label);
    });

    // increase size of legend rects, find by color
    var legendPosition = 0;
    options.colors.forEach(function (color) {
      var count = 0;
      var rects = container.getElementsByTagName('rect');

      // use first rect found for color, ensure colors are all lowercase
      Array.prototype.forEach.call(rects, function(rect) {
        if ((count === 0) && (rect.getAttribute('fill') === color)) {
          count++;

          // increase size of rect
          rect.setAttribute('height', parseFloat(rect.getAttribute('height')) + 2);
          rect.setAttribute('width', legend[legendPosition].getBBox().width + 16);

          // move legend label within rect
          legend[legendPosition].setAttribute('x', parseFloat(rect.getAttribute('x')) + 8);
          legendPosition++;
        }
      });
    });
  });

  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});

.chart {
  background-color: #212f3d;
}

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

Answer 2

您尝试过

textStyle: {
            color: '#969696',
            backgroundColor: '#0f0f0f'
},

？