谷歌餅圖，不能爲2個不同的圖表設置不同的值

Question

我想重新使用谷歌餅圖函數在2個不同的div中繪製圖表。

我的HTML：

<div class="piechart" style="height: 220px;" data-completeness="35"></div> 
<div class="piechart" style="height: 220px;" data-completeness="80"></div> 

我的javascript：

function drawChart() 
{ 
    {#var completeness = 30;#} //this is working and setting same value to the two different charts 
    var completeness = $(this).attr('data-completeness'); //this is not working and charts are rendered very small 

    console.log(completeness); //this is dumping the right values in both cases, either the same, or two different ones as I expect 

    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(this); 
    chart.draw(data, options); 
} 

google.load('visualization', '1', {packages:['corechart']}); 
google.setOnLoadCallback(function(){ 
    $('.piechart').each(drawChart); 
}); 

所以，當我設置一個值，我有以下好看圖：

當我設置了兩個不同的值，結果很奇怪：

信息：我有一個

1：1的XMLHttpRequest不能加載 https://www.google.com/uds/api/visualization/1.0/dca88b1ff7033fac80178eb526cb263e/ui+en.css。 請求的 資源上沒有「Access-Control-Allow-Origin」標題。 'http://foodmeup.dev'因此不允許 訪問。

在這兩種情況下都會出錯，但它在第一種情況下效果很好，所以我不確定這是否是問題。

Answer 1

.attr（「數據完整性」）返回字符串「35」和「80」，因此您可以使用parseInt函數來獲得實際的數字，也可以使用。數據（「完整性」）這樣的

var completeness = $(this).data('completeness'); 
      // or parseInt($(this).attr('data-completeness')); 

全碼

function drawChart(){ 
    var completeness = $(this).data('completeness'); 
    // or parseInt($(this).attr('data-completeness')) 

    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(this); 
    chart.draw(data, options); 
} 

google.load('visualization', '1', {packages:['corechart']}); 
google.setOnLoadCallback(function(){ 
    $('.piechart').each(drawChart); 
});  

https://jsfiddle.net/sjsaa2xf/