将字符串复数化添加到 amCharts 工具提示

Question

我正在使用 amCharts v4 饼图，目前我将鼠标悬停在切片上时会出现此工具提示：

series.slices.template.tooltipText = "{category}: {value.percent.formatNumber('#.')}% ({value} hours)

但是，我希望 "hours" 复数化 正确，即当 {value} 等于 1 时，我希望文本 hour 而不是 hours。

这样的事情可能吗？我找到了适配器，但我认为它们不能在这里使用，因为我使用的是带有类别、百分比和文本的特殊格式。

Answer 1

适配器是这方面的完美用例。您可以查看与工具提示关联的 dataItem 并使用该逻辑来确定 return 是工具提示的复数版本还是使用默认版本，例如：

pieSeries.slices.template.adapter.add('tooltipText', function(tooltipText, target) {
  if (target.dataItem && target.dataItem.value == 1) { 
    return tooltipText.replace('hours', 'hour')
  }
  else {
    return tooltipText;
  }
});

下面的演示：

var chart = am4core.create("chartdiv", am4charts.PieChart);

chart.data = [{
  "country": "Lithuania",
  "hours": 1
}, {
  "country": "Czechia",
  "hours": 2
}, {
  "country": "Ireland",
  "hours": 3
}, {
  "country": "Germany",
  "hours": 1
}, {
  "country": "Australia",
  "hours": 1
}, {
  "country": "Austria",
  "hours": 1
}];

var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "hours";
pieSeries.dataFields.category = "country";
pieSeries.slices.template.tooltipText = "{category}: {value.percent.numberFormatter('#.')}% ({value} hours)";
pieSeries.slices.template.adapter.add('tooltipText', function(tooltipText, target) {
  if (target.dataItem && target.dataItem.value == 1) { 
    return tooltipText.replace('hours', 'hour')
  }
  else {
    return tooltipText;
  }
});

chart.legend = new am4charts.Legend();

#chartdiv {
  width: 100%;
  height: 400px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

将字符串复数化添加到 amCharts 工具提示

Adding string pluralization to amCharts tooltip

pluralize

amcharts4