气泡图：如何避免气泡被切断？谷歌可视化

Posted 2023-02-18

【中文标题】气泡图：如何避免气泡被切断？谷歌可视化

【英文标题】：Bubbles chart: how to avoid bubbles being cut off? google visualization

【发布时间】：2019-11-04 09:23:28

【问题描述】：

我正在使用谷歌可视化气泡图，x 轴和 Y 轴的数据是动态的。我在这里面临的问题是气泡被切断并且大小也不均匀。

使用以下选项

options = 
                'title': 'Chart',
                'width': '100%',
                'height': 550,
                legend: position: 'right',
                vAxis: 
                        title: 'Score',
                    viewWindow: 
                        min: 0,
                        max: 5
                    ,

                    baselineColor: 
                       color: '#4c78c6', 
                    ,
                    sizeAxis : minValue: 0,  maxSize: 15,
                    ticks: [1, 2, 3, 4, 5]
                ,
                hAxis: 
                    title: 'Years',
                    baselineColor: 
                       color: '#4c78c6', 
                    
                ,
                sizeAxis : minValue: 0,  maxSize: 15,
                bubble: 
                    textStyle: 
                        color: 'none',
                    
                ,
                tooltip: 
                    ishtml: true,
                ,
                colors: colors,
                chartArea:  width: "30%", height: "50%" 
            ;

编辑数据传递给

var rows = [
    ['ID','YEAR','SCORE', 'AVG1', 'AVG']
    ['Deka marc', 2.5, 5, '76-100%', 100]
    ['Max cala',  28.2,3.4,'76-100%', 77]
    ['shane root',4.2, 1, '0-25%', 0]
]
var data = google.visualization.arrayToDataTable(rows);

从上面的数组中，我在悬停时删除元素 3，因为不希望在工具提示中显示。 AVG1 列用于图例

像这样得到 o/p

【问题讨论】：

使用此选项会将气泡设置为相同的大小，而与第 5 列中的值无关 --> sizeAxis : minSize: 15, maxSize: 15, -- （注意大小与值）

你确定你有minSize和maxSize吗？ -- 不是上面代码中的minValue 和maxSize...

【参考方案1】：

使用

var rangeX = data.getColumnRange(1);

知道列的范围 然后使用

hAxis: 
  viewWindow:  
            min: rangeX.min-10,
            max: rangeX.max+10
            
       ,

对 yAxis 做类似的操作

https://jsfiddle.net/geniusunil/nt4ymrLe/4/

【参考方案2】：

在 hAxis 中添加 viewWindow 选项。 这是一个示例代码：

viewWindow:  
            min: 0,
            max: 40
            

您可以根据要显示的数据集中的最大值更改最大值。我的意思是如果是 30（如您的示例），您可以设置最大值：40，或者如果是 75，您可以将最大值设置为 85。

JSfiddle here.

【讨论】：

JSfiddle 与您的问题无关。但是，它为上述问题提供了一种可用于所有图表类型的解决方案。现在，由于您的问题，我使用气泡图编辑了示例。如果现在对您有帮助，请告诉我。

气泡的大小取决于行变量的第 5 列。我的意思是，在您的数据集中，列 AVG。如果您为每个数据集行设置相同的数字，您将拥有相同的气泡大小

我在 google doc 中也看到了这一点（第 4 列）。谢谢将相应地管理数据

【参考方案3】：

动态查找各轴的范围，使用数据表法 --> getColumnRange

然后您可以使用ticks 选项来增加范围。

var rangeX = data.getColumnRange(1);
var ticksX = [];
for (var i = (Math.floor(rangeX.min / 10) * 10); i <= (Math.ceil(rangeX.max / 10) * 10); i = i + 10) 
  ticksX.push(i);


var rangeY = data.getColumnRange(2);
var ticksY = [];
for (var i = Math.floor(rangeY.min) - 1; i <= Math.ceil(rangeY.max) + 1; i++) 
  ticksY.push(i);

要使气泡大小一致，请将minSize 和maxSize 设置为相同的值。

sizeAxis : minSize: 15,  maxSize: 15,

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

google.charts.load('current', 
    packages: ['corechart']
).then(function () 
    var rows = [
        ['ID','YEAR','SCORE', 'AVG1', 'AVG'],
        ['Deka marc', 2.5, 5, '76-100%', 100],
        ['Max cala',  28.2,3.4,'76-100%', 77],
        ['shane root',4.2, 1, '0-25%', 0]
    ];
    var data = google.visualization.arrayToDataTable(rows);

    var rangeX = data.getColumnRange(1);
    var ticksX = [];
    for (var i = (Math.floor(rangeX.min / 10) * 10); i <= (Math.ceil(rangeX.max / 10) * 10); i = i + 10) 
      ticksX.push(i);
    

    var rangeY = data.getColumnRange(2);
    var ticksY = [];
    for (var i = Math.floor(rangeY.min) - 1; i <= Math.ceil(rangeY.max) + 1; i++) 
      ticksY.push(i);
    

    var options = 
          title: 'Chart',
          width: '100%',
          height: 550,
          legend: position: 'right',
          vAxis: 
              title: 'Score',
              baselineColor: 
                 color: '#4c78c6',
              ,
              sizeAxis : minSize: 15,  maxSize: 15,
              ticks: ticksY
          ,
          hAxis: 
              title: 'Years',
              baselineColor: 
                 color: '#4c78c6',
              ,
              ticks: ticksX
          ,
          sizeAxis : minSize: 10,  maxSize: 10,
          bubble: 
              textStyle: 
                  color: 'none',
              
          ,
          tooltip: 
              isHtml: true,
          ,
          //colors: colors,
          chartArea:  width: "30%", height: "50%" 
    ;

    var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
    chart.draw(data, options);
);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

【讨论】：

这个问题好运吗？

【参考方案4】：

加上最大值和最小值之差的 10%

vAxis: 
         viewWindow:  
            min: rangeY.min - ((+rangeY.max - rangeY.min) * 10 / 100),
            max: rangeY.max + ((+rangeY.max - rangeY.min) * 10 / 100)
            
       ,

hAxis: 
        viewWindow:  
            min: rangeX.min - ((+rangeX.max - rangeX.min) * 10 / 100),
            max: rangeX.max + ((+rangeX.max - rangeX.min) * 10 / 100)
            
       ,