Легенда круговой диаграммы - Chart.js

Мне нужна помощь, чтобы поместить число круговой диаграммы в легенду

Изображение диаграммы

Если я нахожу диаграмму с мышью, я могу видеть число относительно каждого элемента

Я хочу отобразить его в легенде либо

важный код:

var tempData = {
    labels: Status,
    datasets: [
        {
            label: "Status",
            data: Qtd,
            backgroundColor: randColor
        },

    ]
};

var ctx = $("#pieStatus").get(0).getContext("2d");
var chartInstance = new Chart(ctx, {
    type: 'pie',
    data: tempData,
    options: {
         title: {
            display: true,
            fontsize: 14,
            text: 'Total de Pedidos por Situação'
        },
        legend: {
            display: true,
            position: 'bottom',

        },
        responsive: false
    }

});

"Qtd", "randColor" являются "var" уже со значениями

Ответы

Ответ 1

Вам нужно отредактировать свойство generateLabels в своих настройках:

options: {
    legend: {
        labels: {
            generateLabels: function(chart) {
                 // Here
            }
        }
    }
}

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

Вот small jsFiddle, где вы можете увидеть, как он работает (отредактированные строки - из 38 - прокомментированы) и его результат:

введите описание изображения здесь

Ответ 2

Я хотел позволить пользователю выбирать из наборов данных 100+, но вместо того, чтобы добавлять/удалять их из моей диаграммы, я решил установить showLine: false для любого набора данных, который я хочу скрыть. К сожалению, легенда по умолчанию покажет все 100+. Поэтому в моем решении я генерирую легенду вручную, отфильтровывая любой набор данных, который имеет showLine: false.

Ваши настройки будут иметь это:

legend: {
  labels: {
    generateLabels: (a) => {
      return a.data.labels
    }
  }

И вы создадите свои собственные метки с помощью вспомогательной функции:

function updateAllLabels() {
  const myNewLabels = [];

  myChart.data.datasets.forEach((element) => {
    if (element.showLine) {
      myNewLabels.push(generateLabel(element));
    }
  });

  myChart.data.labels = myNewLabels;
}

И вы сгенерируете метку с другой функцией:

function generateLabel(data) {
  return {
    fillStyle: data.borderColor,
    lineWidth: 1,
    strokeStyle: data.borderColor,
    text: data.countyName, // I attach countryName to my datasets for convenience
  }
}

Теперь просто не забудьте вызывать функцию при обновлении графика:

updateAllLabels();
myChart.update();

Приятного графика!