amChart 4强制定向树动态字体大小

时间:2019-07-03 11:17:24

标签: nodes

是否可以根据节点大小更改每个节点的字体大小。例如,如果一个节点大于一个节点的字体大小应较大,则第二个节点小于一个节点,而第二个节点的字体大小应小于一个节点,因为其他节点上的字体大小根据其大小而减小。

还可以设置节点的最大/最小字体大小 最小节点的最小字体大小14px。 最大节点的最大字体大小为45px。

1 个答案:

答案 0 :(得分:0)

您可以等待,直到节点加载(特别是它们的"ready"事件),之后您可以检查它们的measuredWidths,运行一些数学/逻辑并确定/分配fontSize用于它们(它们的label将自动继承),例如

series.nodes.template.events.on('ready', function(event) {
  // Minimum font size 14:
  // Math.max(14, number here);
  // Maximum font size 45:
  // Math.min(45, number here);
  // combined below...
  // half the width of the node, between 14 and 45.
  var fontSize = Math.max(14, Math.min(45, Math.ceil(event.target.measuredWidth * .5)));
  event.target.fontSize = fontSize;
});

CodePen:

https://codepen.io/team/amcharts/pen/b440a4d0d82e0bd8587a2799a6e2ddb4

如果您需要在计算大小时检查更高级别的节点,可以通过node.dataItem.parent.node进行访问(其中第一个node通常是ForceDirectedNode,即在上面的事件为event.target.dataItem.parent.node)。