Web 如何在网站中设置特定位置的绘图？

我正在使用库plotly显示网站中的图形。就我而言，我把四个馅饼并排放在一起，所有的位置都不正确

我需要将文本和数字放入饼图中，如上图所示：

很明显，页面中间的图形中的文本处于完美的位置，但页面侧的文本和图形数量处于错误的位置。在编写代码时，我使用如下代码结构：

var number = {
  font: {
    size: 32,
    color: '#ddd',
    family: 'verdana'
  },
  showarrow: false,
  text: 'string',
  x: 0.375,
  y: 0.50
};
var text = {
  font: {
    size: 11,
    color: '#ddd',
    family: 'verdana'
  },
  showarrow: false,
  text: 'string',
  x: 0.375,
  y: 0.35
};

在Plotly中，我只需要使用[0,1]比例的页面位置，我将页面分为八个部分，并将第二个图形的文本和编号设置为0.375。太完美了！如果我更改分辨率页面，没有问题

但是，当我设置第一个和最后一个图形的位置（页边：0.125和0.875）时，不起作用。我试图在尺寸页面或文本长度方面做一些计算，但效果不好，当我更改分辨率页面（扩展网站）时，这个错误会增加。因为这是预期的，所以没有必要这样做

我怎样才能解决它