谷歌饼图：如何更改图例中线条的颜色？

Question

我有一个饼图，其中图例的位置设置为“已标记”，因此切片描述和值放置在饼图旁边的一行上。我现在要做的是将连接切片与匹配图例的线条的颜色更改为相应切片的颜色。

legend.textStyle 或其他地方是否有任何属性允许此更改？

这是我的代码：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  // Create and draw the visualization.
  new google.visualization.PieChart(document.getElementById('visualization')).
      draw(data, {
        width: '800',
        height: '400',
        title: "So, how was your day?",
        legend: {
          position: 'labeled',
          textStyle: {
            color: 'gray'    // sets the text color
          }
        }
      });
}

非常感谢！

您好， 安迪

Answer 1

Google 图表是使用svg 技术呈现的，因此可以对其进行样式设置。尽管您将不得不为元素使用一些硬编码的索引。

我已经实现了一个函数replaceLabelColors，它获取相应的g标签并替换它们的属性。

对于您的示例，它可以这样使用：

var dataLength = data.J.length; // 5
var colors = ["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#66aa00","#b82e2e","#316395",
          "#994499","#22aa99","#aaaa11","#6633cc","#e67300","#8b0707","#651067","#329262","#5574a6","#3b3eac","#b77322",
          "#16d620","#b91383","#f4359e","#9c5935","#a9c413","#2a778d","#668d1c","#bea413","#0c5922","#743411"];

var chartId = "visualization"
var chart = new google.visualization.PieChart(document.getElementById(chartId));
chart.draw(data, { width: '800', height: '400', title: "So, how was your day?", colors: colors, legend: { position: 'labeled', textStyle: { color: 'gray' }}});

var graphics = document.getElementById(chartId).querySelectorAll("svg > g");
// graphics[0] is title, graphics[1..n] are pie slices, and we take label area which is graphics[n+1]
var labelsGraphics = graphics[dataLength+1].childNodes; 

// get svg graphics and replace colors
var replaceLabelColors = function(){
    var colorIndex = 0;
    for (var i = 0; i < labelsGraphics.length; i++) {
        if (i % 2 == 0) {
            // skip even indexes
            continue;
        } else {
            var currentLine = labelsGraphics[i];
            currentLine.childNodes[0].setAttribute("stroke", colors[colorIndex]); // <path stroke="#636363" ...>
            currentLine.childNodes[1].setAttribute("fill", colors[colorIndex]); // <circle fill="#636363" ...>
            colorIndex++;
        }
    }
}

replaceLabelColors();
google.visualization.events.addListener(chart, "onmouseover", replaceLabelColors);
google.visualization.events.addListener(chart, "onmouseout", replaceLabelColors);