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

Question

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

这里是代码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);
}

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

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>元素很容易找到，但无论如何，我们无法确定谷歌如何在一个月或一年内呈现图表。但如果你真的真的想要的话就去做吧:)

具有这两种功能的 fork fiddle -> http://jsfiddle.net/u0Ly9uj6/

<小时/>

更新。为了美化图例，即“在文本和边框之间添加一些间距”，如@Learner2011所要求，我认为最简单的方法是减少 y图例中，增加 height的图例，并将彩色方 block 向右移动一点。原因是<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/