【问题标题】:Is there a way to set the minimum and maximum sizes for bubbles in the bubble chart?有没有办法在气泡图中设置气泡的最小和最大尺寸?
【发布时间】:2017-07-11 00:12:03
【问题描述】:

有没有办法为气泡图中的气泡设置最大和最小尺寸?例如,我希望气泡最小为 30 像素,最大为 70 像素。气泡可以在这些范围之间。有没有办法做到这一点?

【问题讨论】:

    标签: charts google-visualization


    【解决方案1】:

    查看选项 --> sizeAxis

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

    请参阅以下工作 sn-p...

    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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-06-13
      • 2011-12-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-26
      相关资源
      最近更新 更多