Добавить границу вокруг круговой диаграммы Google

Я создал круговую диаграмму Google. Мне нужно добавить границу вокруг круговой диаграммы Google, можете ли вы, ребята, помочь мне добавить это? Я добавил код для Google Chart и изображение, которое я хочу, чтобы это было сделано.Добавить границу вокруг круговой диаграммы 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>

источник

2015-01-07 user3689990

Вся диаграмма использует SVG (в Firefox), с сегментами секторные нарисованных с использованием элементов SVG пути. К сожалению, без легкого доступа к значениям центра и радиуса (внутреннего и внешнего), решение должно быть получено из анализа элементов пути SVG. – maurice

В отличие от сайтов форума, мы не используем «Спасибо», «Любая помощь оценена» или подписи на [so]. См. «[Должны ли« Привет »,« спасибо », теги и приветствия удалены из сообщений?] (Http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be -removed-from-posts) .Кроме того, это «Спасибо заранее», а не «Спасибо в продвинутом». –

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

попытаться дать этот стиль CSS. Он может работать. Вы можете соответствующим образом изменить размеры. Я надеюсь, что это работает для вас

источник

2015-01-07 07:08:07

без граничного радиуса, поля и с ним должно работать. – clement

На самом деле css не работал должным образом. добавляет границу вокруг внешнего div (т. е. прямоугольника) – user3689990

Старый вопрос, но, возможно, кто-то еще мог использовать это:

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

источник

2017-04-14 16:33:35

Добавить границу вокруг круговой диаграммы Google

ответ

Смежные вопросы