在Google饼图周围添加边框

Question

I have created a Google Pie chart. 我已经创建了一个Google饼图。 I need to add a border around the Google pie chart can you guys help me to add this? 我需要在Google饼图周围添加边框，你们可以帮我添加此边框吗？ I have added the code for the Google Chart and the image I want it to be done. 我已经添加了Google图表和想要完成的图片的代码。

在此处输入图片说明

    <!DOCTYPE html>
    <html>
    <head>

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

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

    google.setOnLoadCallback(drawChart);

    var values = [];

    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "ChartData.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('Pie').each(function() {
                    var sTitle = $(this).find('Title').text();
                    var sValue = $(this).find('Value').text();

                    if (!isNaN(+sValue)) {
                        sValue = +sValue;
                    }

                    values.push([sTitle, sValue]);
                });

                drawChart(values);
            },
            error: function() {
                alert("An error occurred while processing XML file.");
            }
        });
    });

    function drawChart(val) {

        var data = google.visualization.arrayToDataTable(val);

        var options = {'title':'Sample Charts', 'width':650, 'height':600, pieHole: 0.5, colors: ['#F6891F', '#A59B91', '#72C5EF', '#53585A', '#C8502B'], tooltip: {showColorCode: true}, is3D: false };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
    }
    </script>
    <title>My Read</title>
    </head>

    <body>
        <div id="piechart"></div>
    </body>
    </html>

Answer 1

#piechart {
    width:120px;
    margin: 10px;
    border:5px solid red;
    border-radius: 100px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
}

try giving this css style. 尝试提供这种CSS样式。 It may Work. 可能有效。 You can change dimensions accordingly. 您可以相应地更改尺寸。 I hope it works for you 我希望这个对你有用

Answer 2

Old question but maybe somebody could still use this: 旧问题，但也许有人仍然可以使用：

function drawPieBorder(chart) {
    var layout = chart.getChartLayoutInterface();
    var chartArea = layout.getChartAreaBoundingBox();
    var svg = chart.getContainer().getElementsByTagName('svg')[0];
    var radius = chartArea.height/2;
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    path.setAttribute('stroke', 'black');
    path.setAttribute('stroke-width', 1);
    path.setAttribute('fill', 'transparent');
    path.setAttribute('cx', radius + chartArea.left);
    path.setAttribute('cy', radius + chartArea.top);
    path.setAttribute('r', radius);
    svg.appendChild(path);
}

在Google饼图周围添加边框

问题描述

2 个解决方案

解决方案1
1 2015-01-07 07:08:07

解决方案2
0 2017-04-14 16:33:35

在Google饼图周围添加边框

问题描述

2 个解决方案

解决方案1 1 2015-01-07 07:08:07

解决方案2 0 2017-04-14 16:33:35

解决方案1
1 2015-01-07 07:08:07

解决方案2
0 2017-04-14 16:33:35