是否可以在谷歌可视化核心图表中为图例添加边框？答案

【问题标题】：Is it possible to add borders for legend in google visualization core chart?是否可以在谷歌可视化核心图表中为图例添加边框？
【发布时间】：2015-03-06 15:41:13
【问题描述】：

google可视化核心图表中是否可以为图例添加边框？

这里是代码http://jsfiddle.net/mchx2nLe/1/

google.load('visualization', '1', {
    packages: ['corechart']
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.arrayToDataTable([

        ['Status', 'Completed', 'In Progress', 'Registered / Not Started', 'Past Due', {
            role: 'annotation'
        }],

        ['Safety', 100.0, 0.0, 0.0, 0.0, 'Hello'],
        ['Conduct ', 100.0, 0.0, 0.0, 0.0, 'Hello'],
        ['Policy', 100.0, 0.0, 0.0, 0.0, 'Hello'],
        ['Privacy', 100.0, 0.0, 0.0, 0.0, 'Hello'],
        ['Violence', 100.0, 0.0, 0.0, 0.0, 'Hello'],
        ['Integrity', 0.0, 0.0, 100.0, 0.0, 'Hello']

    ]);

    var options = {
        height: 500,
        width: 500,
        chartArea: {
            left: 100,
            top: 100,
            right: 0,
            bottom: 0
        },
        hAxis: {
            ticks: [25, 50, 75, 100]
        },
        isStacked: true,
        bar: {
            groupWidth: '20'
        },
        vAxis: {
            textStyle: {
                color: '#000000',
                fontSize: '12',
                paddingRight: '0',
                marginRight: '0'
            }
        },
        colors: ['green', '#ffff99', '#ffbf0c', 'red'],
        legend: {
            position: 'right'
        },
        annotations: {
            alwaysOutside: true,
            highContrast: true,
            textStyle: {
                fontSize: 17,
                auraColor: 'none',
                color: '#000'
            }
        },
    };

    var chart = new google.visualization.BarChart(
        document.getElementById('ex5'));

    chart.draw(data, options);
}

要移动右下角的图例并在其周围加边框吗？是否可以？

【问题讨论】：

标签： javascript google-visualization bar-chart

【解决方案1】：

至于右下角要移动的图例，简单：

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

至于希望在图例周围有边框，不 - BarCharts 中的图例周围没有内置边框功能。但是，如果您真的需要，您可以直接操作<svg> <g> <rect> 元素。找到图例的 <rect> 元素：

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

请记住，这不是一个长期稳定的解决方案。在这个例子中，我们很幸运 <g> <rect> 元素很容易找到，但无论如何，我们无法确定谷歌在一个月或一年内如何渲染图表。但是，如果您真的非常想要，那就去做吧:)

两个功能的分叉小提琴 -> http://jsfiddle.net/u0Ly9uj6/

更新。为了美化图例，即“在文本和边框之间添加一些间距”，正如@Learner2011 要求的那样，我认为最简单的方法是减少图例的y，增加图例的height图例，并将彩色方块向右移动一点。原因是<rect>'s 忽略了填充和边距。

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

结果如下所示：

小提琴 -> http://jsfiddle.net/0kLbq4sq/

【讨论】：

@davidonrad 是否可以在文本和边框之间添加一些间距？我尝试添加边距，但没有显示。
@davidonrad.谢谢！

【解决方案2】：

要查看它是如何在线工作的，请尝试以下操作： https://codepen.io/ejsado/pen/HLgzK

CSS：

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

JS：

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

HTML：

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

【讨论】：