谷歌饼图，不能为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/