Chart.js - отображать лидерные линии меток данных на круговой диаграмме

Question

Я много играл с Chart.Js, но изо всех сил старался не попасть в сам Canvas из-за нехватки времени и личных предпочтений маршрута SVG D3 et al.

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

Для представления панели инструментов мои пользователи предпочли бы просто быстро увидеть некоторые метки данных на сегментах - как в Excel - возможно, проще объяснить с помощью изображения:

https://support.office.com/en-gb/article/Display-or-hide-data-label-leader-lines-in-a-pie-chart-d7e7c62e-aaa5-483a-aa00-6d2c437df61b

Проблема с другими решениями, которые я обнаружил здесь, состоит в том, что они просто отображают значение в сегменте, но некоторые сегменты слишком малы, чтобы это могло быть шагом вперед.

Были и другие решения, которые всегда отображали всплывающие подсказки, но их было много и они выглядели довольно ужасно.

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

Answer 1

На самом деле можно показать данные в легенде (я сделал это для панелей, которые я создаю на работе). Вам просто нужно использовать generateLabels свойство label label для достижения этой цели.

Вот пример, который показывает значение данных в скобках в легенде (это делается в элементе легенды text свойство, которое возвращается из функции).

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

      return {
        // here is where we are adding the data values to the legend title
        text: label + " (" + ds.data[i].toLocaleString() + ")",
        fillStyle: fill,
        strokeStyle: stroke,
        lineWidth: bw,
        hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
        index: i // extra data used for toggling the correct item
      };
    });
  } else {
    return [];
  }
}

Вы можете увидеть это в действии в этом коде.

Answer 2

Эта функция пока недоступна, поэтому для этого не существует действительно быстрого решения.