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

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

---

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

viewWindow: { 
            min: 0,
            max: 40
            }

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

---

jsiddle.

要动态查找每个轴的范围，请使用数据表方法-->

getColumnRange

然后您可以使用

勾号

选项来增加范围

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

请参阅以下工作片段

google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
变量行=[
['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（行）；
var rangeX=data.getColumnRange（1）；
var ticksX=[]；
对于（变量i=（数学下限（范围x.min/10）*10）；i使用

了解列的范围
然后使用

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

对yAxis也要这样做

JSFIDLE与您的问题没有特别关系。但是，它为上述问题提供了一个解决方案，可用于所有图表类型。现在，由于您的问题，我使用气泡图编辑了示例。请告诉我现在是否对您有帮助。气泡的大小取决于您所在行的第5列s可变。我的意思是，在您的数据集中，列AVG。如果您为每个数据集行设置相同的数字，您将具有相同的气泡大小。我在google doc中也看到了这一点（第4列）。Thank将根据需要管理数据使用此选项将气泡设置为相同的大小，无论第5列-->
sizeAxis中的值如何：{minSize:15，maxSize:15}，
--（注意大小对值）你确定你有
minSize
和
maxSize
？--而不是上面代码中的
minValue
和
maxSize
。。这个问题运气好吗？
var rangeX = data.getColumnRange(1);

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