Изменить значение метки над гистограммой ng2 - PullRequest
Новая
       12

Изменить значение метки над гистограммой ng2

0 голосов
/ 17 февраля 2020

У меня есть гистограмма, и мне нужно отформатировать значения данных метки в Валюта BRL .

Я уже сделал это в yAxis и в всплывающие подсказки .

Проблема в том, что когда я пытаюсь отформатировать значения данных в валюте BRL, гистограмма не работает, она остается полностью белой.

Это мой параметры диаграммы: 

  public barChartOptionsDB: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{ }], 
      yAxes: [{
        ticks: {
          callback: function (value, index, values) {
            return value.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
          }
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function (tooltipItem, data) {
          var label = data.datasets[tooltipItem.datasetIndex].label || '';

          if (label) {
            label += ': ';
          }

          label += Number(tooltipItem.yLabel).toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
          return label;
        }
      }
    },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  }

И вот как я заполняю гистограмму: 

this.distributorBillValueDash.value = await 
this.apiService.getDistributorBillValue(this.currentUser.userId);

let years = Array.from(new Set(this.distributorBillValueDash.value.map(({ year }) => year)));
let months = Array.from(new Set(this.distributorBillValueDash.value.map(({ month }) => month)));

this.barChartDataDB = [];

// months
months.forEach(element => {
  this.barChartLabelsDB.push(String(element));
});

// for each year
years.forEach(element => {
  this.barChartDataDB.push({ data: this.filterDBByYear(String(element)).map(({ value }) => value), label: String(element) });
});

И это результат, но я хочу отформатировать метки в верхней части каждой полосы, чтобы Валюта BRL, например, с 31551,41 по 31,551,41:

enter image description here

Я уже пытался отформатировать ее, как в yAxes и всплывающих подсказок функция обратного вызова, но безуспешно: 

    years.forEach(element => {
      this.barChartDataDB.push({ data: this.filterDBByYear(String(element)).map(({ value.toLocaleString("pt-BR", { style: "currency", currency: "BRL" }) }) => value), label: String(element) });
    });

Есть идеи, как решить эту проблему?

...