Диаграмма. js - Метки данных не отображаются с использованием средства форматирования - PullRequest
Новая
       10

Диаграмма. js - Метки данных не отображаются с использованием средства форматирования

0 голосов
/ 15 апреля 2020

Я пытаюсь использовать плагин datalabels из диаграммы js, но метки вообще не отображаются на графике! Я использую> = 2.7.0 (фактически 2.9.0) версию Chart. js.

Это мой код: 

var ctx = this.pieChartRef.nativeElement;
    this.pieChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: Object.keys(pieData),
        datasets: [
          {
            data: Object.values(pieData),
            backgroundColor: random,
          },
        ],
      },
      options: {
        legend: {
          position: 'bottom',
          display: true,
        },
        plugins: {
          datalabels: {
            color: '#fff',
            display: true,
            formatter: function (value, ctx) {
              let sum = 0;
              let dataArr: number[] = ctx.chart.data.datasets[0]
                .data as number[];
              dataArr.map((data) => {
                sum += data;
              });
              return ((value * 100) / sum).toFixed(2) + '%';
            },
          },
        },
      },
    });

Никакая метка данных не отображается, даже если я заменю код форматера простым return value + '%'; ... Не могли бы вы помочь мне, я застрял !

Заранее спасибо

Ответы [ 2 ]

1 голос
/ 15 апреля 2020

Во-первых, эта проблема не связана с версиями (2.7 VS 2.9 и т. Д.). В общем, пожалуйста, добавьте демо.

Полагаю, вы хотите, чтобы эти данные [5,5] отображались как 50% 50% и [3,3,3] и 33% / 33% / 33%.

Ваша проблема связана с вычислениями.

sum выглядит как " buggy " (console.log the value). Обратный вызов выполняется на больше , чем один раз (один раз для каждой метки) - и вы помещаете внутрь loop throw массив и объявляете этот массив снова и снова. 

let dataArr: number[] = ctx.chart.data.datasets[0].data as number[];
dataArr.map((data) => {
  sum += data;
});

Этот пример отлично работает (без вложенного l oop): 

var pieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['January', 'February'],
    datasets: [{
      label: 'My First dataset',
      data: [5, 10],
      backgroundColor: ["red", "blue"]
    }]
  },
  options: {
    legend: {
      position: 'bottom',
      display: true,
    },
    plugins: {
      datalabels: {
        color: '#fff',
        display: true, 
        formatter: function (value, ctx) {
          return ((value * 100) / total(ctx)).toFixed(2) + '%';
        },
      },
    },
  },
})

function total(chart){
  let data = chart.chart.data.datasets[0].data;
  const reducer = (accumulator, currentValue) => accumulator + currentValue;
  var total = data.reduce(reducer);
  return total;
}
<div id="wrapper">
  <canvas id="ctx" width="500" height="450"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.min.js"></script>

DRY

Приведенный выше код также немного повторяется - если вы объявляете данные вне графика js объект, который можно вычислить data total только один раз. 

var data = [4, 9, 5, 2];
/* get total */
const reducer = (accumulator, currentValue) => accumulator + currentValue;
var total = data.reduce(reducer);

var pieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
      label: 'My First dataset',
      data: data,
      backgroundColor: ["red", "blue", "green", "violet"]
    }]
  },
  options: {
    legend: {
      position: 'bottom',
      display: true,
    },
    plugins: {
      datalabels: {
        color: '#fff',
        display: true, 
        formatter: function (value, ctx) {
          return ((value * 100) / total).toFixed(2) + '%'; 
        },
      },
    },
  },
})
<div id="wrapper">
  <canvas id="ctx" width="500" height="450"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.min.js"></script>

Более сухой / модульный? (Для изменяемых данных) Поместите общие данные в функцию и т. Д.

0 голосов
/ 15 апреля 2020

Вы пытались понизить график. js до 2.7.3 и запустить его? Кажется, проблема с более высокими версиями, по-видимому. Пожалуйста, опубликуйте демонстрационную ссылку, если это возможно.

...