Question

现在，我的图表标签位于默认位置，但我的标签文字相当长，并且从图表中突出显示。

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

如果上述情况不可行，我想修复可见标签。这可能吗？现在，＆＃34;最好＆＃34;当图形宽度减小时，标签会丢失/隐藏。＆＃34;太多＆＃34;当宽度大幅减少时，标签也会丢失。

我一直在遍历stackoverflow和amcharts网站，但我似乎无法找到一个好的解决方案。有没有办法解决这两个问题......？

yearMapping = {"2016":"6", "2017":"7", "2018":"8", "2019":"9"}

full code in JSfiddle

Answer 1

为了防止图表在调整大小时隐藏标签，您需要禁用valueAxis＆＃39; 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

amcharts定制标签位置

1 个答案: