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

Question

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

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

想要移动右下角的图例并在其周围添加边框吗？可能吗？

Answer 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> 元素很容易找到，但无论如何，我们无法确定 google 是如何在一个月或一年内渲染图形的.但如果你真的非常想要，那就去做吧:)

分叉 fiddle 具有两个特征 -> http://jsfiddle.net/u0Ly9uj6/

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

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

结果如下所示：

fiddle -> http://jsfiddle.net/0kLbq4sq/

Answer 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>

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

Is it possible to add borders for legend in google visualization core chart?

javascript

google-visualization

bar-chart