Sformatuj etykiety yAxis w formacie wykresu słupkowego w Chart.js

Question

Sprawdziłem tutaj dokumentację i podobne pytania, ale wydaje mi się, że nie znalazłem działającego rozwiązania mojego problemu.

Używam Chart.js v.2.1.6, a ja mam wykres słupkowy z wartościami procentowymi zapisanymi w liczbach (już pomnożonymi przez 100). Potrzebuję zarówno etykiet osi Y, jak i etykiet narzędzi do wyświetlenia znaku % po wartościach.

Ktoś może rzucić trochę światła na tę sprawę?

Tu masz mój kod:

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

a skrzypce: https://jsfiddle.net/tdjk3ncs/

EDIT: SOLVED

znalazłem rozwiązanie dzięki miquelarranz, znajdź zaktualizowaną skrzypce:

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

Answer 1

Jeśli chcesz dodać % po wartościach osi Y, możesz to zrobić za pomocą skali w konfiguracji wykresu. Twój kod będzie wyglądać następująco:

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 bieżąco z %: Fiddle

A jeśli chcesz zmodyfikować tekst wyświetlany w podpowiedziach można łatwo zmienić za pomocą zwrotnego. Możesz znaleźć więcej informacji tutaj Tooltip Callbacks