Benutzerdefinierte Legende in Chart.js 2.1.3

Question

Gibt es eine Möglichkeit zum Verschieben und Bearbeiten der Legende im Kreisdiagramm für Chart.js? Insbesondere möchte ich es nach links oder rechts von meinem Tortendiagramm verschieben und es in einem List-Stil anstelle von Inline haben. Ich sehe in der Dokumentation, die die einzigen Positionen oben oder unten sind, damit ich die Standard-Legende mit

Chart.defaults.global.legend.display = false; 

versucht zu verstecken und dann meinen eigenen Gebäude mit

document.getElementById('js-legend').innerHTML = myChart.generateLegend(); 

Aber dies erzeugt nicht die farbige Legende Felder, die dem Diagramm entsprechen.

aktuellen javascript:

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'pie', 
    data: { 
     labels:generatedLabels, 
     datasets: [{ 
      data: dataPoints, 
      backgroundColor: generatedBackgroundColors 
     }] 
    } 
}); 

html:

<div> 
    <canvas id="myChart"></canvas> 

</div> 
<div id="js-legend" class="pieLegend"></div> 

Answer 1

Wenn Sie benutzerdefinierte Legende Element Ihrer Wahl hinzufügen, müssen Sie auch für dieses Element CSS hinzufügen. Sobald Sie es hinzufügen, werden farbige Felder angezeigt.

In Ihrem Fall müssen Sie unter css Klasse div Element hinzufügen.

.pieLegend li span{ 
    display: inline-block; 
    width: 12px; 
    height: 12px; 
    margin-right: 5px; 
}