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

Question

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

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

Answer 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...