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

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;

}

然后从那里，您可以使用set label content和offset coordinates调用此函数：

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