Wie füge ich mit Chart.js v1 ein farbiges Legendenfeld zu einem Kreisdiagramm hinzu?

Question

Ich versuche, mit Chart.js v1 ein Legendenfeld zu einem Kreisdiagramm hinzuzufügen.

Das ist mein HTML-Code:

<div id="TheLegendOfDeviceChart"></div> 
<canvas id="deviceChart" style="height:250px"></canvas> 

Und das ist mein Javascript-Code:

var pieChartCanvas = $("#deviceChart").get(0).getContext("2d"); 
var pieChart = new Chart(pieChartCanvas); 
var PieData = [ 
       { 
        value: 700, 
        color: "#f56954", 
        highlight: "#f56954", 
        label: "Chrome" 
       }, 
       { 
        value: 500, 
        color: "#00a65a", 
        highlight: "#00a65a", 
        label: "IE" 
       }, 
       // other values 
      ]; 
var pieOptions = { 
    // some options 
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>", 
    }; 

var pie = pieChart.Pie(PieData, pieOptions); 
document.getElementById('TheLegendOfDeviceChart').innerHTML = pie.generateLegend(); 

Dies ist, was ich bekommen:

A pie chart with a monochromatic legend

Aber ich möchte eine farbige Legendenbox wie diese haben: http://www.chartjs.org/docs/#doughnut-pie-chart-introduction

Wie kann ich mein legendTemplate ändern, um das zu bekommen?

Answer 1

Sie müssen Chart.js 2.0 verwenden, um die gewünschte Legende zu erhalten. Was ist der Grund, warum Sie 1.0 verwenden möchten? Es wird nicht mehr unterstützt und die letzte Version war 5. April 2016.

Ich empfehle dringend zu 2.0 wechseln und dann können Sie leicht die Vorteile der neuen Legenden nutzen.

Wenn Sie aus irgendeinem Grund 2.0 nicht verwenden können und sich an 1.0 halten müssen, müssen Sie Ihre legendTemplate Eigenschaft korrigieren. Basierend auf der Geige Sie Ihr vorgesehen ist:

legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 

Es ist schwer, da seine lange Zeichenfolge zu sagen, aber das HTML-Template-Ergebnisse in einem leeren <span> die sonst Dataset-Label enthalten sollte. Denken Sie daran, dass ein leerer Bereich nichts anzeigt, selbst wenn er eine background Farbe definiert hat. Hier ist die resultierende HTML-Legende, sobald sie gerendert ist, um zu zeigen, was ich meine.

Per der Chart.js v1 docs, die richtige legendTemplate Zeichenfolge sollte.

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>" 

der Unterschied, dass die <span> das Datensatz Etikett enthält (und daher zeigt korrekt mit farbigem Hintergrund). Aber selbst diese Vorgabe sieht ziemlich schlecht aus.

Glücklicherweise ist dies nur Standard-HTML und CSS, so dass Sie Ihre Legende formatieren können, wie Sie es für richtig halten. Ich würde empfehlen, dass Sie eine Legende in HTML erstellen, die Sie mögen, sie in eine Zeichenfolge konvertieren und die erforderlichen chart.js-Vorlagenausdrücke hinzufügen (z. B. <% for (var i=0; i<segments.length; i++){%, <%=segments[i].fillColor%>, usw.).

Hier ist ein codepen example mit einer schnellen Legende Vorlage, die ich kam, die ziemlich nah an der Chart.js v2 Vorlage aussieht. Der Vollständigkeit halber habe ich auch die wichtigsten Teile unten angegeben.

css:

.indicator_box { 
    width: 55px; 
    height: 5px; 
    padding: 5px; 
    margin: 5px 10px 5px 10px; 
    padding-left: 5px; 
    display: block; 
    float: left; 
} 

Template String:

"<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li style=\"float: left; clear: both;\"><div class=\"indicator_box\" style=\"background-color:<%=segments[i].fillColor%>\"></div><span style=\"font-size: 20px;\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"