Google 饼图,无法为 2 个不同的图表设置不同的值
Google Pie chart, can't set different values for 2 different graphs
我正在尝试重新使用 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 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.
这两种情况都出错,但第一种情况显示得很好,所以我不确定是这里的问题。
.attr('data-completeness') return 字符串“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);
});
我正在尝试重新使用 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 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.
这两种情况都出错,但第一种情况显示得很好,所以我不确定是这里的问题。
.attr('data-completeness') return 字符串“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);
});