Графическая диаграмма Chartjs Легенда

У меня возникают проблемы с появлением легенды на гистограмме, которую я создал с помощью диаграмм. Документация рассказывает о шаблоне легенды, но я не могу найти хороший пример того, как реализовать это в графике. Ниже приведен код, который я использую для генерации графика.

<div style="width: 100%;">
  <canvas id="canvas" height="450" width="600"></canvas>
<div id="legendDiv">&nbsp;</div>
</div>
<script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

    var barChartData = {
        labels : ["Item 1","Item 2","Item 3","Item 4","Item 5","Item 6","Item 7","Item 8","Item 9","Item 10","Item 11","Item 12","Item 13","Item 14","Item 15","Item 16","Item 17"]
        datasets : [
            {
                fillColor : "rgba(166,166,166,0.5)",
                strokeColor : "rgba(166,166,166,0.8)",
                highlightFill: "rgba(166,166,166,0.75)",
                highlightStroke: "rgba(166,166,166,1)",
                data : [10,4,3,4,3,6,4,1,10,3,3,10,2,4,10,3,4]

             },
            {
                fillColor : "rgba(196,64,54,0.5)",
                strokeColor : "rgba(196,64,54,0.8)",
                highlightFill : "rgba(196,64,54,0.75)",
                highlightStroke : "rgba(196,64,54,1)",
                data : [6,3,2,3,2,3,4,1,8,3,3,6,1,3,8,3,4]
            }
        ]

    }
    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
         });
     }

     </script>
 <div>

Ответ 1

НИЖЕ ОТВЕТ ДЛЯ CHARTJS 1.X

Итак, ниже приведен пример того, как вы можете настроить легенду с использованием меток, которые должны быть заданы для каждого набора данных, используя шаблон легенды по умолчанию, который вам нужно сделать, это вызвать generateLegend() на диаграмме, а затем поместить это на странице

var helpers = Chart.helpers;
var canvas = document.getElementById('bar');
var randomScalingFactor = function() {
  return Math.round(Math.random() * 100)
};
var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      fillColor: "rgba(220,220,220,0.5)",
      strokeColor: "rgba(220,220,220,0.8)",
      highlightFill: "rgba(220,220,220,0.75)",
      highlightStroke: "rgba(220,220,220,1)",
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }, {
      label: "My Second dataset",
      fillColor: "rgba(151,187,205,0.5)",
      strokeColor: "rgba(151,187,205,0.8)",
      highlightFill: "rgba(151,187,205,0.75)",
      highlightStroke: "rgba(151,187,205,1)",
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }]

  }
  // 
var bar = new Chart(canvas.getContext('2d')).Bar(barChartData, {
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb",
  animation: false,
});
// 
var legendHolder = document.createElement('div');
legendHolder.innerHTML = bar.generateLegend();

document.getElementById('legend').appendChild(legendHolder.firstChild);
ul {
  list-style: none;
}
ul li {
  display: block;
  padding-left: 30px;
  position: relative;
  margin-bottom: 4px;
  border-radius: 5px;
  padding: 2px 8px 2px 28px;
  font-size: 14px;
  cursor: default;
  height:20px;
  width: 140px;
  -webkit-transition: background-color 200ms ease-in-out;
  -moz-transition: background-color 200ms ease-in-out;
  -o-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}
li span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  border-radius: 5px;
  height:20px
}

li span.bar-legend-text {
  left:25px;
  width:120px;
}
#chart-area > *{
  float:left
    }
<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.min.js"></script>
<div id="chart-area">
  <canvas id="bar" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
  <div id="legend"></div>
</div>

Ответ 2

У меня есть ответ, и он отлично работает...

var ctx = document.getElementById("canvas").getContext("2d");
                        new Chart(ctx).HorizontalBar(barChartLocData, {
                            responsive: true,
                            scaleFontColor: "#000",
                            showTooltips: false,
                            onAnimationComplete: function() {
                                var ctx = this.chart.ctx;
                                ctx.font = this.scale.font;
                                ctx.fillStyle = this.scale.textColor
                                ctx.textAlign = "right";
                                ctx.textBaseline = "right";
                                this.datasets.forEach(function(dataset) {
                                    dataset.bars.forEach(function(bar) {
                                        ctx.fillText(bar.value, bar.x, bar.y - 5);
                                    });
                                });
                            }
                        });

Ответ 3

Попробуйте это

    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,0.8)",
                highlightFill: "rgba(151,187,205,0.75)",
                highlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };
    var context = document.getElementById('clients').getContext('2d');
    var clientsChart = new Chart(context).Bar(data);

HTML:

 <canvas id="clients" width="450" height="350"></canvas>

http://jsfiddle.net/TZq6q/299/

Ответ 4

Для последней версии 2.6.0 это можно сделать, используя legendCallback

Задайте шаблон для легенд:

  legendCallback: function(chart) {
    var text = [];
    text.push('<ul>');
    for (var i=0; i<chart.data.datasets.length; i++) {
      console.log(chart.data.datasets[i]); // see what inside the obj.
      text.push('<li>');
      text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + chart.data.datasets[i].label + '</span>');
      text.push('</li>');
    }
    text.push('</ul>');
    return text.join("");
  },

Добавьте элемент html для таргетинга на местоположение легенд.

<div id="chart-legends"></div>

Затем создайте легенды:

document.getElementById('chart-legends').innerHTML = myChart.generateLegend();