有没有办法在气泡图中设置气泡的最小和最大尺寸?

时间:2017-07-11 00:12:03

标签: charts google-visualization

有没有办法在气泡图中设置气泡的最大和最小尺寸?例如,我希望气泡最小为30px,最大为70px。气泡可以在这些范围之间。有没有办法实现这个目标?

1 个答案:

答案 0 :(得分:2)

查看 - >的选项sizeAxis

sizeAxis: {
  maxSize: 70,
  minSize: 30
},

请参阅以下工作代码段...

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

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 24,
      left: 24,
      bottom: 36,
      right: 4
    },
    height: '100%',
    legend: {
      position: 'bottom'
    },
    sizeAxis: {
      maxSize: 70,
      minSize: 30
    },
    width: '100%'
  };

  var container = $('#chart_div').get(0);
  var chart = new google.visualization.BubbleChart(container);

  function drawBubbles() {
    chart.draw(data, options);
  }

  $(window).resize(drawBubbles);
  drawBubbles();
}
<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>