AmChart 将 labelText 向右移动几个像素

Question

我正在尝试将标签测试向右移动几个像素，因为它现在的显示方式看起来更偏向左侧：

对于 2d 条形图，标签文本与中心对齐，但是当您有 3d 条形图时，您会向左产生轻微的偏移效果，需要 corrected.Label 位置值是："bottom"、"top"、"right"、"left"、"inside"、"middle"。我无法对其进行微调。

对此有什么想法吗？

Answer 1

正如我在评论中提到的，标签相对于 3D 图表的 angle 设置居中。 API 不允许您将标签左右移动，因此您必须直接通过 drawn event. If you set addClassNames to true, you can retrieve the label elements using document.querySelectorAll through the generated DOM class names and then modifying the translate value in the transform attribute accordingly. You can use a technique from this SO answer 操作图形 SVG 节点才能轻松操作 transform 属性作为对象：

// ...
  "addClassNames": true,
  "listeners": [{
    "event": "drawn",
    "method": function(e) {
      Array.prototype.forEach.call(
        document.querySelectorAll(".amcharts-graph-g4 .amcharts-graph-label"),
        function(graphLabel) {
          var transform = parseTransform(graphLabel.getAttribute('transform'));
          transform.translate[0] = parseFloat(transform.translate[0]) + 5; //adjust X offset
          graphLabel.setAttribute('transform', serializeTransform(transform));
      });
    }
  }]
// ...

// from 
function parseTransform(a) {
  var b = {};
  for (var i in a = a.match(/(\w+\((\-?\d+\.?\d*e?\-?\d*,?)+\))+/g)) {
    var c = a[i].match(/[\w\.\-]+/g);
    b[c.shift()] = c;
  }
  return b;
}

//serialize transform object back to an attribute string
function serializeTransform(transformObj) {
  var transformStrings = [];
  for (var attr in transformObj) {
    transformStrings.push(attr + '(' + transformObj[attr].join(',') + ')');
  }
  return transformStrings.join(',');
}

Updated fiddle

AmChart 将 labelText 向右移动几个像素

AmChart move labelText to right a few pixels

amcharts