amcharts5 -移动微调多列图例

Question

试图找出如何使用响应功能计算多列图例中的列宽度。这里的目标是在响应设置指定2列或更多列时，在图表底部以图例居中。

两个问题中的一个一直在发生：( a)使用x: am5.p50和centerX: am5.p50，而centerX似乎没有准确地将整个图例中心化--我不得不通过调整centerX来将图例向右移动。

( b)如果我过于咄咄逼人地试图把这个传说作为中心，它就会变成一列，看上去有点模糊。

我认为amachart是通过假设类别的最大长度(在该列中)来计算每一列的宽度(在图例中)。

所以我真正的问题是-是否有一种方法来指定每一列的最大宽度(在一个图例中)？

​

​

      responsive.addRule({
          relevant: am5themes_Responsive.widthL,
          applying: function () {
              // chart.set("layout", root.verticalLayout);

              // apply position
              legend.setAll({
                  y: null,
                  centerY: null,
                  x: am5.p50,
                  centerX: am5.percent(40), //tweaked to shift legend to the right

                  dx: 0,
                  dy: 0,

                  layout: am5.GridLayout.new(root, {
                      maxColumns: 2,
                      maxRows: 3,
                      fixedWidthGrid: false
                  }),
              });

              // apply font size
              legend.labels.template.setAll({
                  fontSize: ".8rem",
                  fontWeight: "300"
              });

          },

Answer 1

以下是解决办法：

                // adjust labels
                legend.labels.template.setAll({
                    fontSize: ".8rem",
                    fontWeight: "300",

                    maxWidth: 20,
                    // oversizedBehavior: "truncate", 
                    // ellipsis: "...",
                });

奇怪的是: maxWidth本身就限制了标签连，但超过20 by！

此外，

• (自行)似乎解决了我原来的问题.

中提到的多列问题。

oversizedBehavior所做的一切都是它说的，但不是：

• 文本被截断为不可读的len (即20 be )或
• ，如果将maxWidth设置为更高的值，则多列问题将产生丑陋的头部，即应该是2列的内容将解析为长的单列

。

底线--仅对maxWidth使用legen.labels就可以在图例中使用多列网格，并且它可以正确地居中触发单个列.