Как создать собственную легенду в круговой диаграмме angular-chart.js

Я использовал angular-chart.js на своем веб-сайте для создания круговой диаграммы, и я хотел бы настроить легенду. По умолчанию в легенде отображается цвет и метка. (Как показано на рисунке ниже) Я хотел бы добавить значение / данные этой метки, как показано во всплывающей подсказке диаграммы.

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

Это мой HTML-код:

<canvas id="pie" class="chart chart-pie"
   chart-data="chartData" chart-labels="chartLabels" chart-options="chartOptions">
</canvas>

Согласно документации angular-chart.js, легенда теперь является параметром Chart.js, поэтому атрибут диаграммы-легенды был удален.

Вот почему в своем JS-коде я попытался добавить generateLabels, на всякий случай это то, что мне нужно для настройки легенды:

$scope.chartOptions = { 
        legend: {
          display: true,
          labels: {
            generateLabels: function(chart){
              console.log(chart.config);
            }
          }
        }
      };

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

Может ли кто-нибудь научить меня, как правильно изменять легенду, чтобы добиться того, чего я хотел?

Заранее спасибо!


angularjs angular-chart
person Christa    schedule 25.10.2016    source источник
comment
Вы имеете в виду содержание всплывающей подсказки?   -  person Zlatan Omerović    schedule 25.10.2016
comment
Вот подсказка. Если вы вернете chart.generateLegend (), вы должны увидеть шаблон HTML. Следите за проблемами git # 522 и # 428. Вам необходимо использовать шаблон из console.log проверить мой plnkr. Я не знаю, как использовать этот шаблон и поддерживается ли он оболочкой angular. Но это то, что я сделаю на вашем месте.   -  person Mahesh    schedule 25.10.2016

Ответы (1)


arrow_upward
11
arrow_downward

Позвольте мне попытаться пролить свет / ответить на ваш вопрос:

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

var theHelp = Chart.helpers;
// You need this for later

// Inside Options:
legend: {
display: true,    
// generateLabels changes from chart to chart,  check the source, 
// this one is from the doughnut :
// https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.doughnut.js#L42
labels: {
  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 && arc.custom || {};
        var getValueAtIndexOrDefault = theHelp.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 {
          // And finally : 
          text: ds.data[i] + "% of the time " + label,
          fillStyle: fill,
          strokeStyle: stroke,
          lineWidth: bw,
          hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
          index: i
        };
      });
    }
    return [];
  }
}
}

Результат: Chart.js pie Custom Legend

Codepen: Ярлыки пользовательских легенд круговой диаграммы Chart.js

Есть и другие альтернативы, если вы заметили на ручке / круговой диаграмме, срезы также содержат информацию о данных, то есть из плагина (проверьте ручку)

Еще один вариант - отобразить метки легенды за пределами холста, например:

myPieChart.generateLegend();

Что дает вам этот HTML:

"<ul class='0-legend'><li><span style='background-color:black'>  </span>she returns it </li><li><span style='background-color:white'></span>she keeps it</li></ul>"

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

person Keno    schedule 26.10.2016