帶有jquery的clonig Google餅圖觸發XMLHttpRequest錯誤

Question

我有一個Google餅圖，該餅圖正確顯示在我的頁面上。 現在，我想將該圖表克隆到我網站的另一個div中。 不幸地拋出XMLHttpRequest錯誤：

XMLHttpRequest無法加載https://www.google.com/uds/api/visualization/1.0/dca88b1ff7033fac80178eb526cb263e/ui+en.css 。 所請求的資源上沒有“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問源“ http://foodmeup.dev ”。

我該如何克服呢？

我的觀點 ：

    <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

更改drawChart函數以接受DOM元素作為參數

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

}

然后調用兩次。