web - 如何在网站中设置特定位置的图表？

Question

我正在使用库来在网站中显示图表。就我而言，我将四个馅饼并排放置，所有位置都不正确。

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

很明显，页面中间的图表内的文本处于完美位置，但页面侧的文本和图表数量位置不正确。当我编码它时，我使用如下代码结构：

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）时，不起作用。我正在尝试对尺寸页面或文本长度进行一些计算，但效果不佳，当我更改分辨率页面（扩展网站）时，此错误会增加。由于它是预期的，没有必要这样做。

我该如何解决？

标签： webplotlyresponsive