有没有办法按照它们的顺序排列气泡大小？

Question

我有一个气泡图，但我试图为每个气泡添加饼图。为了做到这一点，我需要将每个馅饼放在相应的泡泡之上。我也需要根据他们的泡沫给他们相应的尺寸。我得到这样的尺寸：parseFloat($($('#countContainer circle').get(i)).attr('r'))这个问题在于Google Charts根据最小的第一个和最大的最后一个来组织尺寸。我不能以他们的尺寸对应我的x轴。有没有办法按照它们的顺序排列气泡大小？

Answer 1

气泡出现要由大小降序排列

这样创建的图表，因此排序的数据表，绘制图表

见下述工作段之前，
这也尝试直接通过使用气泡的半径和调整的x，y位置相应

放置饼图的气泡，

然而，这似乎进一步调整需要
似乎更大的泡沫需要进行更多的调整，
而较小的气泡需要调整为较小

google.charts.load('current', { 
 
    callback: drawSeriesChart, 
 
    packages:['corechart'] 
 
}); 
 

 
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] 
 
    ]); 
 

 
    // sort size descending 
 
    data.sort([{column: 4, desc: true}]); 
 

 
    var options = { 
 
    legend: { 
 
     position: 'bottom' 
 
    }, 
 
    title: 'Correlation between life expectancy, fertility rate ' + 
 
     'and population of some world countries (2010)', 
 
    hAxis: { 
 
     title: 'Life Expectancy' 
 
    }, 
 
    vAxis: { 
 
     title: 'Fertility Rate' 
 
    }, 
 
    bubble: { 
 
     opacity: 0, 
 
     stroke: 'transparent', 
 
     textStyle: { 
 
     fontSize: 11 
 
     } 
 
    }, 
 
    height: '100%', 
 
    width: '100%', 
 
    chartArea: { 
 
     height: '100%', 
 
     width: '100%', 
 
     top: 36, 
 
     left: 24, 
 
     bottom: 36, 
 
     right: 4 
 
    } 
 
    }; 
 

 
    var containerPie = $('#pie_charts').get(0); 
 
    var containerBubble = $('#chart_div').get(0); 
 
    var chart = new google.visualization.BubbleChart(containerBubble); 
 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    var layout = chart.getChartLayoutInterface(); 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
     var data2 = google.visualization.arrayToDataTable([ 
 
     ['Task', 'Hours per Day'], 
 
     ['Work', 11], 
 
     ['Eat', 2], 
 
     ['Commute', 2], 
 
     ['Watch TV', 2], 
 
     ['Sleep', 7] 
 
     ]); 
 

 
     var bubble = $($('#chart_div circle').get(i)); 
 
     var radius = parseFloat(bubble.attr('r')); 
 

 
     var xPos = layout.getXLocation(data.getValue(i, 1)) - (radius/2); 
 
     var yPos = layout.getYLocation(data.getValue(i, 2)) - (radius/2); 
 

 
     var pieChart = containerPie.appendChild(document.createElement('div')); 
 
     pieChart.className = 'pie-chart'; 
 
     pieChart.style.top = yPos + 'px'; 
 
     pieChart.style.left = xPos + 'px'; 
 

 
     new google.visualization.PieChart(pieChart).draw(data2, { 
 
     pieHole: 0.5, 
 
     legend: { 
 
      position: 'none' 
 
     }, 
 
     backgroundColor: 'transparent', 
 
     theme: 'maximized', 
 
     height: (radius * 2), 
 
     width: (radius * 2) 
 
     }); 
 
    } 
 
    }); 
 

 
    function drawBubbles() { 
 
    $(containerPie).html(''); 
 
    chart.draw(data, options); 
 
    } 
 

 
    $(window).resize(drawBubbles); 
 
    drawBubbles(); 
 
}

.pie-chart { 
 
    border: none; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div> 
 
<div id="pie_charts"></div>