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

Question

我当前的图例代码为：

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

我想让它看起来像一个例子：

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

*编辑

当前看起来像这样：

使用方法：

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

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

Answer 1

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

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

 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'
},

？