ChartJS: пользовательская легенда не отображает метки для многослойной диаграммы - PullRequest
Новая
       6

ChartJS: пользовательская легенда не отображает метки для многослойной диаграммы

0 голосов
/ 24 августа 2018

У меня есть круговая диаграмма с несколькими кольцами и я создал функцию пользовательской легенды с кодом ниже: 

function (chart) {
var text = [];
text.push('<ul class="list-inline ' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
    text.push('<li class="list-inline-item"><i class="fas fa-circle pr-1" style="color:' +
            chart.data.datasets[0].backgroundColor[i] + '"></i>');
    if (chart.data.labels[i]) {
        text.push('<span class="font-weight-bold">' + chart.data.labels[i] + '</span>');
    }
    text.push('</li>');
}
text.push('</ul>');
return text.join('');
},

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

Вот JSfille (https://jsfiddle.net/kingBethal/x03w2qbk/17/)

1 Ответ

0 голосов
/ 24 августа 2018

Чтобы собрать метки из всех наборов данных, вы должны включить все наборы данных в свой цикл: 

for(var j = 0; j < chart.data.datasets.length; j++){
  for (var i = 0; i < chart.data.datasets[j].data.length; i++) {
      text.push('<li class="list-inline-item"><small><i class="fas fa-circle pr-1" style="color:' +
              chart.data.datasets[j].backgroundColor[i] + '"></i>');
      if (chart.data.datasets[j].labels[i]) {
          text.push('<span class="font-weight-bold">' + chart.data.datasets[j].labels[i] + '</span>');
      }
      text.push('</small></li>');
  }
}
...