javascript - 气泡图 : how to avoid bubbles being cut off? 谷歌可视化

Question

我正在为气泡图使用谷歌可视化，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

Answer 1

使用

var rangeX = data.getColumnRange(1);

知道列的范围 然后使用

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

对 yAxis 做同样的事情

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