Legenda personalizzata con ChartJS v2.0

Question

Sto provando a creare un modello di legenda personalizzato in ChartJS v2.0. In v1 * di ChartJS ho semplicemente aggiunto un alloggio ai nuovo costruttore Grafico come ...

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

io non riesco a trovare alcuna documentazione in v2.0 per questa opzione. È ancora disponibile? Qualcuno può mostrare un esempio di come realizzare questo?

Grazie!

Update - codice di lavoro al di sotto

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

C'è una funzione legendCallback:

legendCallbackFunzionefunction (chart) { }
funzione per generare una leggenda. Riceve l'oggetto grafico da cui generare una legenda. L'implementazione predefinita restituisce una stringa HTML.

dettagli si possono trovare qui: http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends

Answer 2

Se voi ragazzi correre attraverso questo post e ho cercato la risposta distaccato e non ha funzionato, provate questo:

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

Quindi aggiungere questo qui sotto:

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

Per creare le leggende. Assicuratevi di avere un elemento <div id="chart-legends"></div>

Answer 3

Questo codice sta lavorando per me

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(); 
};