Niestandardowa legenda z ChartJS v2.0

Question

Próbuję utworzyć niestandardowy szablon legendy w ChartJS v2.0. W v1 * od ChartJS po prostu dodaje obiekt do nowego konstruktora wykresu, takich jak ...

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>' 

ja nie mogę znaleźć żadnej dokumentacji w v2.0 dla tej opcji. Czy jest już dostępny? Czy ktoś może pokazać przykład, jak to osiągnąć?

Dziękujemy!

Update - kod roboczy poniżej

legendCallback: function(chart) { 
       console.log(chart.data); 
       var text = []; 
       text.push('<ul>'); 
       for (var i=0; i<chart.data.datasets[0].data.length; i++) { 
        text.push('<li>'); 
        text.push('<span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">' + chart.data.datasets[0].data[i] + '</span>'); 
        if (chart.data.labels[i]) { 
         text.push(chart.data.labels[i]); 
        } 
        text.push('</li>'); 
       } 
       text.push('</ul>'); 
       return text.join(""); 
      } 

Answer 1

Jest legendCallback funkcja:

legendCallbackFunkcjafunction (chart) { }
Funkcja wygenerować legendę. Odbiera obiekt wykresu, z którego generowana jest legenda. Domyślna implementacja zwraca ciąg znaków HTML.

Szczegóły można znaleźć tutaj: http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends

Answer 2

Jeśli faceci prowadzony przez tego postu i próbował wysłana odpowiedź i nie działa, spróbować tego:

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's 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(""); 
    }, 

Następnie dodać poniżej:

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

Tworzenie legend. Upewnij się, że masz element <div id="chart-legends"></div>

Answer 3

Ten kod działa dla mnie

updateDataset = function(target, chart, label, color, data) { 
    var store = chart.data.datasets[0].label; 
    var bgcolor = chart.data.datasets[0].backgroundColor; 
    var dataSets = chart.data.datasets[0].data; 
    var exists = false; 
    for (var i = 0; i < chart.data.datasets[0].label.length; i++) { 
     if (chart.data.datasets[0].label[i] === label) { 
      chart.data.datasets[0].label 
      exists = true; 
      chart.data.datasets[0].label.push(store.splice(i, 1)[0][1]); 
      chart.data.datasets[0].backgroundColor.push(bgcolor.splice(i, 1)[0][1]); 
      chart.data.datasets[0].data.push(dataSets.splice(i, 1)[0][1]);  
     } 
    } 
    if (!exists) { 
     chart.data.datasets[0].label.push(label); 
     chart.data.datasets[0].backgroundColor.push(color); 
     chart.data.datasets[0].data.push(data); 
     exists = false; 
    } 
    chart.update(); 
};