Легенда круговой диаграммы - 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" уже со значениями


chart.js pie-chart legend-properties
person dpanegassi    schedule 12.09.2016    source источник

Ответы (3)


arrow_upward
47
arrow_downward

Вам необходимо отредактировать свойство generateLabels в ваших опциях:

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

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

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

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

person tektiv    schedule 13.09.2016
comment
Отлично, я бы никогда не сделал это сам, HolyS * так много кода работает как шарм, спасибо большое за помощь и ваше время - person dpanegassi; 13.09.2016
comment
в скрипте, который вы показываете, также изменилась всплывающая подсказка при наведении курсора мыши, которую я не нашел, где она находится в вашем коде? - person Syed Uzair Uddin; 02.06.2017
comment
@UzairXlade Я не трогал всплывающую подсказку в скрипте. Всплывающие подсказки автоматически определяются с метками, установленными в данных (в первых строках) - person tektiv; 02.06.2017

arrow_upward
0
arrow_downward

Я хотел позволить пользователю выбирать из более чем 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();

Удачного построения графиков!

person Boris Yakubchik    schedule 23.05.2019

arrow_upward
0
arrow_downward

Следуя ответу tektiv, я изменил его для ES6, которого требует мой линтер;

options: {
  legend: {
    labels: {
      generateLabels: (chart) => {
        const { data } = chart;
        if (data.labels.length && data.datasets.length) {
          return data.labels.map((label, i) => {
            const meta = chart.getDatasetMeta(0);
            const ds = data.datasets[0];
            const arc = meta.data[i];
            const custom = (arc && arc.custom) || {};
            const { getValueAtIndexOrDefault } = Chart.helpers;
            const arcOpts = chart.options.elements.arc;
            const fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
            const stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
            const bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
            const value = chart.config.data.datasets[arc._datasetIndex].data[arc._index];

            return {
              text: `${label}: ${value}`,
              fillStyle: fill,
              strokeStyle: stroke,
              lineWidth: bw,
              hidden: Number.isNaN(ds.data[i]) || meta.data[i].hidden,
              index: i,
            };
          });
        }
        return [];
      },
    },
  },
},
person Doto Pototo    schedule 25.02.2021