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

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

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

非常感谢

您好，

---

Andi

谷歌图表是通过使用

svg

技术呈现的，因此可以对其进行样式化。尽管您必须为元素使用一些硬编码索引

我实现了一个函数

replacelcolors

，它获取相应的

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

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”、“#0C522”、“#743411”]；
var chartId=“可视化”
var chart=new google.visualization.PieChart（document.getElementById（chartId））；
绘制（数据，{宽度：'800'，高度：'400'，标题：“今天过得怎么样？”，颜色：颜色，图例：{位置：'labeled'，文本样式：{颜色：'gray'}}）；
var graphics=document.getElementById（chartId.querySelectorAll（“svg>g”）；
//图形[0]是标题，图形[1..n]是饼图切片，我们取标签区域，即图形[n+1]
var labelsGraphics=graphics[dataLength+1].childNodes；
//获取svg图形并替换颜色
var replaceLabelColors=函数（）{
var指数=0；
对于（var i=0；i

API中没有控制连接图例和饼图切片的线条颜色的选项。感谢您的回复，asgallant。也许将来会有一个功能提供此功能。你可以制作一个新的来添加支持。你如何修复白色文本？

45.8%

中的

.8%

被遮住了。@Davidell可能通过使用

PieSiceTextStyle:{color:'gray'}

，您可以在这里找到图表属性：如果您想反转文本和百分比/数字，这是可能的。如果像“Sleep”、“Watch TV”这样的文本运行到2行或更多行，那么我们需要做更多的工作，使用g的兄弟姐妹（带有百分比/数字和文本），以及g的兄弟姐妹（带有行）。