Question

我创建了一个谷歌饼图。我需要在谷歌饼图周围添加一个边框你们可以帮我添加吗？我添加了Google图表的代码和我希望它完成的图像。

enter image description here

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

尝试给出这种css风格。它可能有效。您可以相应地更改尺寸。我希望它对你有用

Answer 2

老问题，但也许有人仍然可以使用这个：

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 个答案: