时间戳

首页 > 解决方案 > Amcharts4: 'legendSettings' 'itemValueText' 检查空值或未定义值

javascript - Amcharts4: 'legendSettings' 'itemValueText' 检查空值或未定义值

问题描述

因此，我创建了一个百分比柱形图，在条形悬停时，我在工具提示和图例中显示数据，类似于https://www.amcharts.com/docs/v4/concepts/legend/#Interacting_with_cursor。最后我还添加了 % 。（我从后端 API 获取 40、55、90 之类的数据，分别表示 40%、50% 和 90%，而不是 0.4 或 0.5）。我也在开始显示平均百分比。

series.legendSettings.itemValueText = "[bold]{valueY}%[/]";
series.legendSettings.valueText = "(Avg: [bold]{valueY.average.formatNumber('#.##')}%[/])";

因此，在某些情况下，对于整个数据集，其中一列是 null 或未定义，我没有得到密钥本身，这导致图例仅显示%。悬停时它将显示%。

所以我的问题是 - 有什么方法可以检查 'itemValueText' 或 {valueY} 来检查它是否是 'undefined' 而最后不添加 % ？还是有其他方法，我做错了？基本上像 -

series.legendSettings.itemValueText = "{valueY}";
if (series.legendSettings.itemValueText !== undefined) {           // or check {valueY}
    series.legendSettings.itemValueText = "[bold]{valueY}%[/]";    // Only if value is undefined add % in last
    series.legendSettings.valueText = "(Avg: [bold]{valueY.average.formatNumber('#.##')}%[/])";
}

标签： javascriptamchartsamcharts4

解决方案

您可以在图例的模板上创建一个textOutput适配器，valueLabels以根据您的模板字符串检查最终文本输出并进行相应调整。

chart.legend.valueLabels.template.adapter.add("textOutput", function(text, target) {
  if (text === '(Avg: [bold]%[/])') {
    return 'N/A';
  }
  else if (text === '[bold]%[/]') {
    return '';
  }
  return text;
});

演示

推荐阅读