谷歌饼图，不能为 2 个不同的图表设置不同的值答案

【问题标题】：Google Pie chart, can't set different values for 2 different graphs谷歌饼图，不能为 2 个不同的图表设置不同的值
【发布时间】：2015-04-20 16:23:21
【问题描述】：

我正在尝试重新使用 google 饼图函数在 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” 访问。

在这两种情况下都有错误，但在第一种情况下显示良好，所以我不确定这是这里的问题。

【问题讨论】：

标签： javascript html charts highcharts pie-chart

【解决方案1】：

.attr('data-completeness') 返回字符串“35”和“80”，因此您可以使用 parseInt 获取实际数字，也可以像这样使用 .data("completeness")

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/

【讨论】：