如何在气泡图中获得泡沫的大小?

时间:2017-07-09 23:09:07

标签: javascript google-visualization

我想从气泡图中获取每个气泡的大小。每个气泡上方都有一个饼图,其大小与气泡相同。我怎样才能得到每个泡泡的大小?这是我的jsFiddle

HTML / CSS

<div id="chart_div"></div>
.whiteHat {
  border: none;
  width: 50px;
  height: 50px;
  position: absolute;
}

JS

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

我怎样才能使每个馅饼与各自的气泡一样大?

0 个答案:

没有答案