Добавление строкового множественного числа во всплывающую подсказку amCharts - PullRequest
Новая
       46

Добавление строкового множественного числа во всплывающую подсказку amCharts

0 голосов
/ 09 мая 2020

Я использую amCharts v4 P ie диаграмму , и в настоящее время у меня есть всплывающая подсказка, которая появляется при наведении курсора на фрагменты: 

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

Однако я хотел бы иметь "часы" во множественном числе правильно, т.е. когда {value} равно 1, я хотел бы иметь текст hour вместо hours.

Возможно ли подобное? Я нашел адаптеры, но не думаю, что их можно здесь использовать, потому что я использую специальный формат с категорией, процентом и текстом.

1 Ответ

1 голос
/ 11 мая 2020

Адаптеры - идеальный вариант использования для этого. Вы можете посмотреть на dataItem, связанный с всплывающей подсказкой, и использовать этот logi c, чтобы определить, следует ли возвращать версию всплывающей подсказки во множественном числе или использовать версию по умолчанию, например: 

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>
...