如何在图表上显示叠加标签？答案

【问题标题】：How to display an overlay label on a chart?如何在图表上显示叠加标签？
【发布时间】：2009-04-02 08:53:54
【问题描述】：

我有一个使用 Birt 创建的图表，我想在其上添加一些标签以指定由 2 个红色标记分隔的 4 个区域（见下图），每个象限中有一个标签（如果可能，居中）。

我正在寻找解决方案，直接使用 birt 图表编辑器或使用 javascript（就像我为红色标记所做的那样）。

【问题讨论】：

你能更具体一点吗？您是否希望在每个象限、标记的交叉点、x 轴标记的下方/上方、y 轴标记的任一侧或完全远离图表的侧面/底部/顶部添加标签？
对不起。我想在每个象限中添加一个标签（如果可能，居中）

标签： javascript reporting birt

【解决方案1】：

为了使图表的每个象限中的某种类型的标签动态居中，您必须有某种计算坐标的方法。当然，我对 Birt 并不是很熟悉，我假设图表的红色标记会有所不同。

无论如何，假设您可以获取坐标，您可以编写一个函数，根据几个参数动态生成标签：

function generateLabel(sContent, iXoffset, iYoffset) {

  var eLabel = document.createElement('span');
  eLabel.appendChild(document.createTextNode(sContent));

  var eDivision = document.createElement('div');
  eDivision.appendChild(eLabel);

  eDivision.style.left = iXoffset + 'px';
  eDivision.style.top = iYoffset + 'px';
  // include other styles here...

  return eDivision;

}

然后从那里，您可以使用设置的标签内容和偏移坐标调用此函数：

var eQuadrantOneLabel = generateLabel('Quadrant One', 10, 25);
// and so on...

然后只需将元素添加到图形的容器中（假设它有一个id，比如graph）：

var eGraphContainer = document.getElementById('graph');
eGraphContainer.appendChild(eQuadrantOneLabel);
// and so on for each label...

【讨论】：