javascript - 谷歌饼图 : How can I change the color of lines in the legend?

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