带有jquery的clonig Google饼图触发XMLHttpRequest错误

Question

I have a google pie chart which displays correctly on my page. Now I want to clone that chart in another div of my website. It's unfornuately throwing a XMLHttpRequest error :

XMLHttpRequest cannot load https://www.google.com/uds/api/visualization/1.0/dca88b1ff7033fac80178eb526cb263e/ui+en.css . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://foodmeup.dev ' is therefore not allowed access.

How can I overcomethis ?

My view :

    <div id="piechart" style="height: 220px;"></div>
    <div id="profile_completion_graph" class="responsive">
//the div in which I want to clone the graph
    </div>

<script type="text/javascript">
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Nom',    'Valeur'],
                ["Profil rempli à ", {{ completeness }}],
                ['Manque', {{ 100 - completeness }}]
            ]);

            var options = {
                backgroundColor: { fill:'transparent'},
                pieSliceBorderColor : 'transparent',
                pieHole: 0.8,
                legend: {position: 'top'},
                width: 220,
                height: 220,
                tooltip: {trigger: 'none'},
                pieStartAngle: -90,
                pieSliceTextStyle :{fontsize : 16, color: 'transparent'},
                slices: {
                    0: { color: '#09b4ff'},
                    1: { color: '#444'}
                },
                chartArea : {width: '90%', height: '90%'}
            };

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

            chart.draw(data, options);
        }

        google.load('visualization', '1', {callback : function(){drawChart();}, 'packages':['corechart']})


</script>

<script>
    $(function(){
        var $graphs = $('#chart_picture').clone();
        $('#profile_completion_graph').eq(0).html($graphs);
    });
</script>

Answer 1

Change drawChart function to accept DOM element as an argument

function drawChart(elem){
   ....
    var chart = new google.visualization.PieChart(elem);

}

Then call it two times.