在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这样的对象。

ListTemplate基本上将对象/类的实际实例用作其将来将生成的所有此类对象的模板，并将其存储在其template属性中。 chart.legend.labels是Label的ListTemplate。

默认情况下，统计图的图例将引用统计图的系列以自动生成图例项目，它将克隆chart.legend.markers.template和chart.legend.labels.template，然后用系列的颜色/数据填充克隆。因此，如果原始标签为disabled，它将为：

  

“隐藏，...已从任何处理，布局计算中删除，并且通常视为不存在。”

这就是我们想要的，因为.hide()可以在视觉上隐藏文本，但仍然占据相同的空间（以CSS的术语来说，它很像display: none与visibility: hidden）

以上过程是异步。这就是为什么您的代码chart.legend.labels.values.length如果直接在源代码中运行而返回0，但是如果稍后直接在控制台中运行则返回预期的数字。如果要遍历图例项目或标签，则必须等待它们显示，然后使用其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，每次都会隐藏/显示图例的标签，并相应地更新其布局。