Die yAxis-Bezeichnungen des Balkendiagramms in Chart.js

Question

Ich habe die Dokumentation und ähnliche Fragen hier angesehen, aber ich finde keine funktionierende Lösung für mein Problem.

Ich verwende Chart.js v.2.1.6, und ich habe ein Balkendiagramm mit Prozentwerten als Zahlen gespeichert (bereits mit 100 multipliziert). Ich brauche sowohl Y-Achsen-Etiketten als auch Tooltips, um das % Zeichen nach den Werten anzuzeigen.

Jemand kann etwas Licht in diese Angelegenheit bringen?

Hier können Sie meinen Code haben:

var data = { 
    "labels": ["Label1", "Label2", "Label3", "Label4", "Label5"], 
    "datasets": [{ 
    "label": "Variation", 
    "data": ["56", "-82.3", "25.7", "32.2", "49.99"], 
    "borderWidth": 1, 
    "backgroundColor": "rgba(231, 76, 60, 0.2)", 
    "borderColor": "rgba(231, 76, 60, 1)" 
    }] 
}; 

var myBarChart = new Chart($("#myCanvas"), { 
    type: 'bar', 
    data: data, 
    maintainAspectRatio: false 
}); 

Und eine Geige: https://jsfiddle.net/tdjk3ncs/

EDIT: behobenes

ich die Lösung dank miquelarranz gefunden, finden die aktualisierte Geige:

https://jsfiddle.net/tdjk3ncs/7/

Answer 1

Wenn Sie nach den Werten der Y-Achse % hinzufügen möchten, können Sie dies mithilfe von Skalen in Ihrer Diagrammkonfiguration tun. Ihr Code wird wie folgt aussehen:

var myBarChart = new Chart($("#myCanvas"), { 
    type: 'bar', 
    data: data, 
    maintainAspectRatio: false, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        // Create scientific notation labels 
        callback: function(value, index, values) { 
         return value + ' %'; 
        } 
       } 
      }] 
     } 
    } 
}); 

Documentation about scales

Fiddle aktualisiert mit dem %: Fiddle

Und wenn Sie den Text in den Tooltips angezeigt ändern möchten, können Sie es leicht Rückruf verwenden ändern. Weitere Informationen finden Sie hier Tooltip Callbacks