Wie werden Balkenbeschriftungen in der Legende in Chart.js 2.1.6 angezeigt?

Question

Ich erstellen Diagramme mit Chart.js und ich möchte die Beschriftungen für die Balken in der Legende, nicht den Titel des Datasets zeigen (es gibt nur einen), siehe das Bild unten als ein Beispiel:

Meine heutige Legende sieht genauso aus wie folgt aus:

ich durch die docs ausgesehen haben, aber ohne Erfolg, ich fand sie wirklich sehr verwirrend.

Hier ist mein aktueller Code:

var chart_0 = new Chart($('#cp_chart_0'), { 
     type: 'bar' 
    , data: { 
      labels: ['Blue','Green','Yellow','Red','Purple','Orange'] 
     , datasets: [{ 
       label: 'Dataset 1' 
      , borderWidth: 0 
      , backgroundColor: ['#2C79C5','#7FA830','#7B57C3','#ED4D40','#EC802F','#1DC6D3'] 
      , data: ['12','2','5','0','9','1'] 
     }] 
     } 
}); 

Dank!

Answer 1

einfachste Weg, um Ihre Daten mit mehreren Sätzen bieten: mit generateLabels

data: { 
     labels: ['total votes'] 
    , datasets: [{ 
      label: 'Blue' 
     , backgroundColor: ['#2C79C5'] 
     , data: ['12'] 
    },{ 
      label: 'Green' 
     , backgroundColor: ['#7FA830'] 
     , data: ['2'] 
    }, 
    ... 
    ] 
    } 

Aber Sie können eine benutzerdefinierte Etiketten generieren - http://www.chartjs.org/docs/#chart-configuration-legend-configuration

Oder auch anpassen, um die ganze Legende, einschließlich Formatierung, mit legendCallback - http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration

Answer 2

In einer der neuesten Versionen von Chart.js 2.1.x haben sie diese Funktionalität hinzugefügt. Also hol dir die neueste Version zuerst. Dann fügen Sie den folgenden Code ein.

Es befindet sich unter den Optionen und Legende. Hier ist, wie Sie es verwenden:

options: { 
    legend: { 
     position: 'right' 
    } 
}