代码之家 › 专栏 › 技术社区 › user2896120

有没有办法按制造顺序订购气泡尺寸?

google-visualization javascript

user2896120 · 技术社区 · 7 年前

parseFloat($($('#countContainer circle').get(i)).attr('r')) 问题是谷歌图表根据最小的第一个和最大的最后一个来组织大小。我不能以与尺寸对应的方式排列x轴。有没有办法按制造顺序订购气泡尺寸?

1 回复 | 直到 7 年前

WhiteHat 7 年前

图表气泡似乎是按大小降序创建的

因此,在绘制图表之前,对数据表进行相应的排序

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

请参阅以下工作片段,

通过使用气泡的半径并调整

然而,似乎需要进一步调整
似乎更大的泡沫需要更多的调整,

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>