我正在尝试将标签测试移动到正确的几个像素,因为它现在显示的方式看起来更像左边:
标签文本与2d条形图的中心对齐,但是当你有3d条形时,左边有一个需要修正的轻微偏移效果。标签位置值为:“bottom”,“top”,“right”, “左”,“内”,“中”。 我无法微调它。
有关于此的任何想法吗?
答案 0 :(得分: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(',');
}