Javascript 如何获得气泡图中气泡的大小?
我正试图从气泡图中得到每个气泡的大小。每个气泡上方都有一个与气泡大小相同的饼图。如何获得每个气泡的大小?这是我的 HTML/CSSJavascript 如何获得气泡图中气泡的大小?,javascript,google-visualization,Javascript,Google Visualization,我正试图从气泡图中得到每个气泡的大小。每个气泡上方都有一个与气泡大小相同的饼图。如何获得每个气泡的大小?这是我的 HTML/CSS <div id="chart_div"></div> .whiteHat { border: none; width: 50px; height: 50px; position: absolute; } google.charts.load('current', { 'packages': ['corechart'] }
<div id="chart_div"></div>
.whiteHat {
border: none;
width: 50px;
height: 50px;
position: absolute;
}
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Correlation between life expectancy, fertility rate ' +
'and population of some world countries (2010)',
hAxis: {
title: 'Life Expectancy'
},
vAxis: {
title: 'Fertility Rate'
},
bubble: {
textStyle: {
fontSize: 11
}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function() {
var layout = chart.getChartLayoutInterface();
for (var i = 0; i < data.getNumberOfRows(); i++) {
// add image above every fifth element
if (i % 2 == 0) {
var xPos = layout.getXLocation(data.getValue(i, 1));
var yPos = layout.getYLocation(data.getValue(i, 2));
var data2 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var pie = document.getElementById('piechart');
var whiteHat = container.appendChild(document.createElement('div'));
whiteHat.className = 'whiteHat';
whiteHat.style.top = yPos - 25 + 'px';
whiteHat.style.left = xPos - 25 + 'px';
new google.visualization.PieChart(whiteHat).draw(data2, {
pieHole: 0.5,
legend: {
position: 'none'
},
backgroundColor: 'transparent',
chartArea: {
width: "100%"
},
});
}
}
});
chart.draw(data, options);
}
白帽先生{
边界:无;
宽度:50px;
高度:50px;
位置:绝对位置;
}
JS
<div id="chart_div"></div>
.whiteHat {
border: none;
width: 50px;
height: 50px;
position: absolute;
}
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Correlation between life expectancy, fertility rate ' +
'and population of some world countries (2010)',
hAxis: {
title: 'Life Expectancy'
},
vAxis: {
title: 'Fertility Rate'
},
bubble: {
textStyle: {
fontSize: 11
}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function() {
var layout = chart.getChartLayoutInterface();
for (var i = 0; i < data.getNumberOfRows(); i++) {
// add image above every fifth element
if (i % 2 == 0) {
var xPos = layout.getXLocation(data.getValue(i, 1));
var yPos = layout.getYLocation(data.getValue(i, 2));
var data2 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var pie = document.getElementById('piechart');
var whiteHat = container.appendChild(document.createElement('div'));
whiteHat.className = 'whiteHat';
whiteHat.style.top = yPos - 25 + 'px';
whiteHat.style.left = xPos - 25 + 'px';
new google.visualization.PieChart(whiteHat).draw(data2, {
pieHole: 0.5,
legend: {
position: 'none'
},
backgroundColor: 'transparent',
chartArea: {
width: "100%"
},
});
}
}
});
chart.draw(data, options);
}
google.charts.load('current'{
“包”:[“核心图表”]
});
google.charts.setOnLoadCallback(drawSeriesChart);
函数drawSeriesChart(){
var data=google.visualization.arrayToDataTable([
[‘ID’、‘预期寿命’、‘生育率’、‘地区’、‘人口’],
[CAN',80.66,1.67',北美',33739900],
[DEU',79.84,1.36,'Europe',81902307],
[DNK',78.6,1.84,'欧洲',5523095],
[EGY',72.73,2.78,'中东',79716203],
[GBR',80.05,2,'欧洲',61801570],
[IRN',72.49,1.7,'中东',73137148],
[IRQ',68.09,4.77,'中东',31090763],
[ISR',81.55,2.96,'中东',7485600],
[RUS',68.6,1.54,'Europe',141850000],
[美国,78.09,2.05,北美,307007000]
]);
变量选项={
标题:“预期寿命和生育率之间的相关性”+
"世界部分国家人口(2010)",,
哈克斯:{
标题:“预期寿命”
},
言辞:{
标题:“生育率”
},
气泡:{
文本样式:{
尺寸:11
}
}
};
var container=document.getElementById('chart_div');
var chart=new google.visualization.BubbleChart(document.getElementById('chart_div'));
google.visualization.events.addListener(图表'ready',函数(){
var layout=chart.getChartLayoutInterface();
对于(var i=0;i
如何使每个饼都和各自的气泡一样大?在
for
循环中,获取半径-->parseFloat($($('chart\u div circle')。获取(I)).attr('r')
--如果您想要每行的饼图,可能需要删除以下语句--如果(i%2==0)
@WhiteHat我假设r是半径,所以我用r*2得到直径,并给出了我的宽度和高度的直径值,但由于某些原因,饼图似乎与for
循环中的气泡大小不同,以获取半径-->parseFloat($($('chart#u div circle')。get(i)).attr('r')
--如果您想为每行创建一个饼图,可能需要删除以下语句--如果(i%2==0)
@WhiteHat我假设r是半径,所以我使用r*2来获取直径,并为我的宽度和高度提供直径值,但由于某些原因,饼图似乎与气泡的大小不同