amcharts 自定义标签位置答案

【问题标题】：amcharts customized label positionamcharts 自定义标签位置
【发布时间】：2016-12-12 21:37:50
【问题描述】：

现在我的图表标签放置在默认位置，但我的标签文本相当长并且从图表中伸出。

如果可能的话，我想放置它，这样标签就不会从图表中伸出来。

或者如果上述方法不可行，我想修复可见标签。这可能吗？现在，当图形宽度减小时，“最佳”标签会丢失/隐藏。当宽度大大减小时，“太多”标签也会丢失。

我一直在搜索 stackoverflow 和 amcharts 网站，但似乎找不到一个好的解决方案。有什么办法可以解决这两个问题...？

// tried these but doesnt work for what I want to do
va.labelOffset = -5;
va.position = "bottom";
va.inside = false;

full code in JSfiddle

【问题讨论】：

标签： javascript graph charts label amcharts

【解决方案1】：

为了防止图表在调整大小时隐藏标签，您需要禁用 valueAxis'autoGridCount 并将 gridCount 设置为您想要查看的刻度线数。您还需要删除 labelFrequency 设置。

va.autoGridCount = false;
va.gridCount = 3;
//va.labelFrequency = 5;

至于标签定位，您只能进行开箱即用的旋转和垂直偏移。作为一种解决方法，您可以通过drawn 事件直接修改 SVG 节点来定位标签，例如：

// prior to chart.write
chart.addListener("drawn", function(e) {
  var textNodes = e.chart.valueAxes[0].labelsSet.node.childNodes;
  var transform;

  //Position "too little"
  transform = parseTransform(textNodes[0].getAttribute('transform'));
  transform.translate[0] = parseFloat(transform.translate[0]) + 25;
  textNodes[0].setAttribute('transform', serializeTransform(transform));
  // Position "too much"
  transform = parseTransform(textNodes[2].getAttribute('transform'));
  transform.translate[0] = parseFloat(transform.translate[0]) - 25;
  textNodes[2].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

【讨论】：