Javascript 是否可以在google visualization core图表中为图例添加边框？

是否可以在google visualization core图表中为图例添加边框

这是密码

---

是否要移动右下角带有边框的图例？可能吗

对于要移动到右下角的图例，只需：

legend: {
    position: 'right',
    alignment: 'end'
}

至于希望在图例周围有一个边框，否-条形图中图例周围没有内置边框功能。但是，如果确实需要，可以直接操作

元素。查找图例的

元素：

var legend = document.querySelector('#ex5')
                     .querySelector('g')
                     .querySelector('rect');

根据需要设置样式：

legend.setAttribute('style', "fill:blue;stroke:pink;stroke-width:5;fill-
opacity:0.1;stroke-opacity:0.9");

请记住，作为长期稳定的解决方案，这是不可取的。在这个例子中，我们很幸运地发现

元素很容易找到，但不管怎样，我们无法确定google在一个月或一年内是如何呈现图形的。但如果你真的真的想做，就去做：）

具有两种功能的叉形小提琴->

---

更新。为了美化图例，即@Learner2011要求的“在文本和边框之间添加一些间距”，我认为最简单的方法是减少图例的

y

，增加图例的

高度，并将彩色正方形向右移动一点。原因是
忽略了填充和边距

//increase legend height and decrese legend top
legend.setAttribute('y', parseInt(legend.getAttribute('y'))-6);    
legend.setAttribute('height', parseInt(legend.getAttribute('height'))+12);
legend.setAttribute('style', "fill:#ebebeb;stroke:black;stroke-width:1;fill-opacity:1;stroke-opacity:1;");

//move the colored squares a little to the right    
var legendTitles = document.querySelector('#ex5')
                           .querySelector('g')
                           .children;
for (var i=1;i<legendTitles.length;i++) {
    var rects = legendTitles[i].querySelectorAll('rect');
    rects[1].setAttribute('x', parseInt(rects[1].getAttribute('x'))+3);
}

//增加图例高度，减少图例顶部
legend.setAttribute（'y'，parseInt（legend.getAttribute（'y'））-6）；
legend.setAttribute（'height'，parseInt（legend.getAttribute（'height'））+12）；
legend.setAttribute（'style'，“fill:#ebebebebeb；笔划：黑色；笔划宽度：1；填充不透明度：1；笔划不透明度：1；”）；
//将彩色方块向右移动一点
var legendTitles=document.querySelector（“#ex5”）
.querySelector（'g'）
儿童
对于（var i=1；i要查看其在线工作原理，请尝试以下操作：

CSS:

JS:

HTML:

随时间变化的流量
@davidonrad是否可以在文本和边框之间添加一些间距？我尝试添加边距，但没有显示。@davidonrad。谢谢！
//increase legend height and decrese legend top
legend.setAttribute('y', parseInt(legend.getAttribute('y'))-6);    
legend.setAttribute('height', parseInt(legend.getAttribute('height'))+12);
legend.setAttribute('style', "fill:#ebebeb;stroke:black;stroke-width:1;fill-opacity:1;stroke-opacity:1;");

//move the colored squares a little to the right    
var legendTitles = document.querySelector('#ex5')
                           .querySelector('g')
                           .children;
for (var i=1;i<legendTitles.length;i++) {
    var rects = legendTitles[i].querySelectorAll('rect');
    rects[1].setAttribute('x', parseInt(rects[1].getAttribute('x'))+3);
}

#bar-chart::before, #line-chart::before {
content: "";
position: absolute;
display: block;
width: 240px;
height: 30px;
left: 155px;
top: 254px;
background: #FAFAFA;
box-shadow: 10px 10px 0px 0px #DDD;
}

var lineOptions = {
legend: {
  position: 'bottom',
  textStyle: {
    fontSize: 12
  }
 },
};

<h5>Traffic Over Time</h5>
<div id="line-chart"></div>