свойство datalabels применяется ко всем наборам данных

Question

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

Этот код был написан для создания графика:

const weeklyBarData = {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  datasets: [
    {
      label: 'Pens Assembled',
      backgroundColor: 'rgba(200,10,10,0.8)',
      borderColor: 'transparent',
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    },
    {
      label: 'Pens Disassembled',
      backgroundColor: 'rgba(10,200,10,0.8)',
      borderColor: 'transparent',
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    },
    {
      label: 'Pens Claimed',
      backgroundColor: 'rgba(10,10,200,0.8)',
      borderColor: 'transparent',
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    },
  ],
};

Как выКак видно из кода, мне пришлось трижды скопировать код, связанный с метками данных, и я хочу этого избежать.Я прочитал в документации к Chart.js, что вы можете применять «метки данных» к каждому набору данных, ко всей диаграмме или глобально, и я верю, что в нашей ситуации применение этого к диаграмме будет лучшим решением.Я пытался добавить код «datalabel» позади массива, но все еще в пределах datasets, и он не работал.Я также пытался изменить дизайн weeklyBarData, но у меня были некоторые ошибки, которые даже не загружали сайт правильно, я пытался сделать что-то вроде этого:

const weeklyData = {
  labels: [],

  datasets: {
    data: [
      {
        // logic goes here
      },
      {
        // logic goes here
      },
      {
        // logic goes here
      }
    ],
    datalabels: {
        // logic goes here
    }
  }
};

У меня заканчиваются идеи, и я могуЯ не могу найти какое-либо решение в Интернете, поэтому я задаюсь вопросом: есть ли для меня какой-либо способ перепроектировать код weeklyBarData или применить свойство datalabel ко всей диаграмме, используя текущий код?

(Мы используемРеагируйте на наш интерфейс).

Во-вторых, используя приведенный выше код, я могу создать этот график:

AsВы видите, я получаю эту странную маленькую вещь в верхнем левом углу.Я увеличил масштаб, и это похоже на строку с символом «%».Также он исчезает, когда я удаляю весь код datalabel.Есть мысли о том, что это может быть и как от этого избавиться?

Answer 1

, чтобы применить метки ко всему графику,
добавить datalabels к опции плагинов ...

var ctx = document.getElementById("data");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: weeklyBarData,
  options: {
    plugins: {
      datalabels:{
        align: 'end',
        anchor: 'end',
        formatter: function(value, context){
          let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
          percent = Math.round(percent);
          percent = (percent !== 0) ? percent.toString() + '%' : "";
          return percent;
        }
      }
    }
  }
});

см. Следующий рабочий фрагмент ...

$(document).ready(function() {
  var totalPensDaily = [100, 100, 100, 100, 100];

  const weeklyBarData = {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    datasets: [
      {
        label: 'Pens Assembled',
        backgroundColor: 'rgba(200,10,10,0.8)',
        borderColor: 'transparent',
        data: [100, 200, 300, 400, 500],
      },
      {
        label: 'Pens Disassembled',
        backgroundColor: 'rgba(10,200,10,0.8)',
        borderColor: 'transparent',
        data: [100, 200, 300, 400, 500],
      },
      {
        label: 'Pens Claimed',
        backgroundColor: 'rgba(10,10,200,0.8)',
        borderColor: 'transparent',
        data: [100, 200, 300, 400, 500],
      },
    ],
  };

  var ctx = document.getElementById("data");
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: weeklyBarData,
    options: {
      plugins: {
        datalabels:{
          align: 'end',
          anchor: 'end',
          formatter: function(value, context){
            let percent = (totalPensDaily[context.dataIndex] !== 0 ? (value / totalPensDaily[context.dataIndex])*100 : "");
            percent = Math.round(percent);
            percent = (percent !== 0) ? percent.toString() + '%' : "";
            return percent;
          }
        }
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="data"></canvas>

примечание: я не вижу никаких странных мелочей в верхнем левом углу здесь ...