AmChart将labelText移动到几个像素

Question

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

标签文本与2d条形图的中心对齐，但是当你有3d条形时，左边有一个需要修正的轻微偏移效果。标签位置值为：“bottom”，“top”，“right”， “左”，“内”，“中”。 我无法微调它。

有关于此的任何想法吗？

Answer 1

正如我的评论所述，标签相对于3D图表的angle设置居中。 API不允许您向左或向右移动标签，因此您必须直接通过drawn事件操纵图形SVG节点。如果您将addClassNames设置为true，则可以使用document.querySelectorAll通过generated DOM class names检索标签元素，然后修改translate中的transform值相应的属性。您可以使用this SO answer中的技术轻松地将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 http://stackoverflow.com/questions/17824145/parse-svg-transform-attribute-with-javascript
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