隐藏 AmChart4 上的图例标签

Question

我正在使用 amchart 折线图。

我想在图表上隐藏 amchart 图例标签。

我好不容易才发现有与 labels

相关的项目

console.log(chart.legend.labels.values);
console.log(chart.legend.labels.values.length)// somehow 0....

  for (key in this.chart.legend.labels.values){ // it doesn't loop...
    this.chart.legend.labels.values[key].hide();
  }

如何隐藏图例标签？

Answer 1

简短回答：

chart.legend.labels.template.disabled = true;

演示：

https://codepen.io/team/amcharts/pen/17e8f139f06008c69ee45130718d5324

了解 amCharts v4's ListTemplate concept 将有助于理解为什么这个答案有效，以及如何在您想迭代它的情况下使用像 chart.legend.labels 这样的对象。

A ListTemplate 基本上使用 object/Class 的实际实例作为将来生成的所有此类对象的模板，并将其存储在其 template 属性. chart.legend.labels is a ListTemplate for/of Labels.

默认情况下，图表的图例会参考图表的系列自动生成图例项，它会克隆 chart.legend.markers.template 和 chart.legend.labels.template，然后用系列填充克隆 colors/data.所以如果原来的标签是disabled，就会是：

"hidden, ... removed from any processing, layout calculations, and generally treated as if it does not exist."

这就是我们想要的，因为 .hide() 可以在视觉上隐藏文本，但仍然占据相同的 space（用 CSS 的术语来思考，这很像 display: none 对比 visibility: hidden).

以上过程异步。这就是为什么你的代码，chart.legend.labels.values.length，returns 0 if 运行直接在源代码中，但预期的数字 if 运行稍后直接在控制台中。如果你想遍历图例项或标签，你必须等待它们被渲染，然后使用它的 each() 方法（而不是通过 values 循环），例如：

chart.legend.events.on("inited", function() {
    chart.legend.labels.each(function(label) {
        // Do something related to this specific label
    });
});

在上面的代码中，我们等待图例本身获取其数据、解析和渲染，然后我们检查填充的标签是否是我们想要做的。

通过提前使用template，我们完全忽略了异步的本质。如果您想在事后对所有图例标签应用设置，在 chart.legend.labels.template 的情况下，它已经将 applyOnClones 设置为 true，因此您可以在 chart.legend.labels.template.disabled 之间切换true 和 false 在您的应用程序运行期间的任何时间，它会 hide/show 每次立即显示图例的标签，相应地更新其布局。

隐藏 AmChart4 上的图例标签

Hide legend label on AmChart4

javascript

amcharts