Как добавить метки/легенды для всех типов диаграмм в chart.js(chartjs.org)?

Ответ 1

Вы можете включить шаблон легенды в параметры диаграммы:

//legendTemplate takes a template as a string, you can populate the template with values from your dataset 
var options = {
  legendTemplate : '<ul>'
                  +'<% for (var i=0; i<datasets.length; i++) { %>'
                    +'<li>'
                    +'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
                    +'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
                  +'</li>'
                +'<% } %>'
              +'</ul>'
  }

  //don't forget to pass options in when creating new Chart
  var lineChart = new Chart(element).Line(data, options);

  //then you just need to generate the legend
  var legend = lineChart.generateLegend();

  //and append it to your page somewhere
  $('#chart').append(legend);

Вам также нужно добавить базовый CSS, чтобы он выглядел нормально.

Ответ 2

• Легенда является частью стандартных параметров библиотеки ChartJs. Поэтому вам не нужно явно добавлять его в качестве опции.

• Библиотека генерирует HTML. Это просто вопрос добавления этой страницы. Например, добавьте его в innerHTML данного DIV. (Отредактируйте параметры по умолчанию, если вы редактируете цвета и т.д.)

<div>
    <canvas id="chartDiv" height="400" width="600"></canvas>
    <div id="legendDiv"></div>
</div>

<script>
   var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "The Flash Speed",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
                label: "Superman Speed",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };

    var myLineChart = new Chart(document.getElementById("chartDiv").getContext("2d")).Line(data);
    document.getElementById("legendDiv").innerHTML = myLineChart.generateLegend();
</script>

Ответ 3

Странно, я не нашел ничего о легендах и ярлыках в документации Chart.js. Кажется, вы не можете сделать это только с помощью chart.js.

Я использовал https://github.com/bebraw/Chart.js.legend, который является чрезвычайно легким, чтобы генерировать легенды.

Ответ 4

Для линейной диаграммы я использую следующие коды.

Сначала создайте пользовательский стиль

.boxx{
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

Затем добавьте это в свои параметры линии

var lineOptions = {
            legendTemplate : '<table>'
                            +'<% for (var i=0; i<datasets.length; i++) { %>'
                            +'<tr><td><div class=\"boxx\" style=\"background-color:<%=datasets[i].fillColor %>\"></div></td>'
                            +'<% if (datasets[i].label) { %><td><%= datasets[i].label %></td><% } %></tr><tr height="5"></tr>'
                            +'<% } %>'
                            +'</table>',
            multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"

var ctx = document.getElementById("lineChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineData, lineOptions);
document.getElementById('legendDiv').innerHTML = myNewChart.generateLegend();

Не забудьте добавить

<div id="legendDiv"></div>

на вашем html, где вы хотите разместить свою легенду. Что это!

Ответ 5

Я знаю, что этот вопрос старый. Но это может быть полезно для тех, у кого есть проблема с легендой. В дополнение к ответом, данным ZaneDarken, Я изменил файл chart.js, чтобы показать легенду в круговой диаграмме . Я изменил legendTemplate (который объявляется много раз для каждого типа диаграммы) чуть выше этих строк:

Chart.Type.extend({
      //Passing in a name registers this chart in the Chart namespace
      name: "Doughnut",
      //Providing a defaults will also register the deafults in the chart namespace
      defaults: defaultConfig,
      .......