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

分叉小提琴兼具两种功能 - ＆gt;的 http://jsfiddle.net/u0Ly9uj6/

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

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

结果如下：
enter image description here

小提琴 - ＆gt;的 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可视化核心图表中为图例添加边框？

2 个答案: