Javascript 谷歌图表中的水平间隔？

我在工作中使用React，我们一直在考虑尝试使用内置方法在散点图中的点周围绘制方框。现在，我们可以使用内置的垂直间隔，但有没有一种方法也可以添加水平间隔

---

我似乎在任何地方都找不到这方面的任何东西。如果不可能，我们可以通过其他方式实现同样的效果吗？

没有内置选项来围绕一组点绘制方框

但是，有一些图表方法可用于查找所绘制点的坐标

首先，使用图表方法-->

getChartLayoutInterface（）

返回布局界面

布局界面有一个方法-->

getBoundingBox（id）

其中，

id

是您要调查的点

id

的格式应为-->

点0

其中第一个

0

是序列，第二个是行。
e、 g

bounds

将是一个具有-->顶部、左侧、高度和宽度属性的对象

一旦我们有了坐标，我们就可以画出自己的方框，
在图表的

'ready'

事件中

请参阅以下工作片段，
函数

drawBox

获取框应围绕的点的数组

drawBox([
  {series: 0, row: 1},
  {series: 0, row: 3},
  {series: 0, row: 4}
]);

---

google.charts.load（'current'{
包：['controls'，'corechart']
}).然后（函数（）{
var data=google.visualization.arrayToDataTable([
['x'，'y']，
[8, 12],
[4, 5.5],
[11, 14],
[4, 5],
[3, 3.5],
[6.5, 7]
]);
var chartWrapper=new google.visualization.chartWrapper({
图表类型：“散点图”，
集装箱船：“海图分区”，
数据表：数据，
选项：{
图表区：{
高度：“100%”，
宽度：“100%”，
排名：36，
左：36，
右：18，
底数：36
},
高度：“100%”，
图例：{
位置：'顶部'
},
点数：8，
宽度：“100%”，
}
});
google.visualization.events.addListener（图表包装器'ready'，函数（）{
google.visualization.events.addListener（chartWrapper.getChart（），“单击”，函数（单击）{
log（JSON.stringify（单击））；
});
抽屉([
{系列：0，行：1}，
{系列：0，行：3}，
{系列：0，行：4}
]);
});
功能抽屉（点）{
var chart=chartWrapper.getChart（）；
var chartLayout=chart.getChartLayoutInterface（）；
var container=document.getElementById（chartWrapper.getContainerId（））
var xCoord={min:null，max:null}；
var yCoord={min:null，max:null}；
点。forEach（函数（点）{
var bounds=chartLayout.getBoundingBox（'point#'+point.series+'#'+point.row）；
xCoord.min=xCoord.min | | bounds.left；
xCoord.min=Math.min（bounds.left，xCoord.min）；
xCoord.max=xCoord.max | | bounds.left；
xCoord.max=Math.max（bounds.left，xCoord.max）；
yCoord.min=yCoord.min | | bounds.top；
yCoord.min=Math.min（bounds.top，yCoord.min）；
yCoord.max=yCoord.max | | bounds.top；
yCoord.max=Math.max（bounds.top，yCoord.max）；
});
xCoord.min=xCoord.min-chartWrapper.getOption（'pointSize'）；
xCoord.max=xCoord.max+（chartWrapper.getOption（'pointSize'）*2）；
yCoord.min=yCoord.min-chartWrapper.getOption（'pointSize'）；
yCoord.max=yCoord.max+（chartWrapper.getOption（'pointSize'）*2）；
var svg=container.getElementsByTagName（'svg'）[0]；
var svgNS=svg.namespaceURI；
var circle=container.getElementsByTagName（'circle'）[1]；
var-box=document.createElements（svgNS，“polygon”）；
setAttribute（'fill'，'transparent'）；
setAttribute（'stroke'，'#000000'）；
setAttribute（'stroke-width'，'2'）；
setAttribute（'points'，xCoord.min+'，'+yCoord.min+''+xCoord.max+'，'+yCoord.min+''+xCoord.max+'，'+yCoord.max+''，'+yCoord.max+'，'+yCoord.max+'）；
圆.parentNode.appendChild（框）；
}
window.addEventListener（'resize'，函数（）{
chartWrapper.draw（）；
});
chartWrapper.draw（）；
});
html，正文{
身高：100%；
保证金：0px 0px 0px 0px；
溢出：隐藏；
填充：0px 0px 0px 0px；
}
.图表{
身高：100%；
}
哦，哇。白帽子两次来营救！谢谢你，巴德，这真的很有帮助。我对谷歌图表的了解少得可怜：'）
drawBox([
  {series: 0, row: 1},
  {series: 0, row: 3},
  {series: 0, row: 4}
]);