Chart.js 2.0 Formatowanie osi Y z separatorem walutowym i tysiącami

Question

Mam problemy z formatowaniem osi wykresu i nie jestem w stanie znaleźć przykładu dla zaktualizowanej wersji 2.0.

Jak mogę (na przykład) zarobić 2000000 do 2 000 000 EUR?

Moje skrzypce: https://jsfiddle.net/Hiuxing/4sLxyfya/4/

window.onload = function() { 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myBar = new Chart(ctx, { 
     type: 'bar', 
     data: barChartData, 
     options: { 
      title: { 
       display:true, 
       text:"Figure" 
      }, 
      legend: { 
       position: "bottom" 
      }, 
      tooltips: { 
       mode: 'label', 
       bodySpacing: 10, 
       cornerRadius: 0, 
       titleMarginBottom: 15 
      }, 
      scales: { 
       xAxes: [{ 
        ticks: {} 
       }], 
       yAxes: [{ 
        ticks: { 
         beginAtZero: true, 
         stepSize: 500000 
        } 
       }] 
      }, 
      responsive: true 
     } 
    }); 
}; 

Answer 1

Fix

przypisać funkcję do userCallback podczas tworzenia obiektu config. Zostanie wywołana podczas tworzenia znaczników. można znaleźć w dokumentacji na Chart.js at the bottom of Scales Documentation

Example fiddle with the fix

yAxes: [{ 
    ticks: { 
     beginAtZero: true, 
     stepSize: 500000, 

     // Return an empty string to draw the tick line but hide the tick label 
     // Return `null` or `undefined` to hide the tick line entirely 
     userCallback: function(value, index, values) { 
      // Convert the number to a string and splite the string every 3 charaters from the end 
      value = value.toString(); 
      value = value.split(/(?=(?:...)*$)/); 

      // Convert the array to a string and format the output 
      value = value.join('.'); 
      return '€' + value; 
     } 
    } 
}] 

Answer 2

dla osób korzystających wersja: 2.5.0, tutaj jest rozszerzeniem. Dzięki temu można również formatować kwoty w podpowiedziach na wykresie, nie tylko „kleszczy” W „yAxes”

... 
options: { 
    scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero:true, 
       callback: function(value, index, values) { 
        return '$ ' + number_format(value); 
       } 
      } 
     }] 
    }, 
    tooltips: { 
     callbacks: { 
      label: function(tooltipItem, chart){ 
       var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || ''; 
       return datasetLabel + ': $ ' + number_format(tooltipItem.yLabel, 2); 
      } 
     } 
    } 
} 

Oto Number_format() funkcja czego używam:

function number_format(number, decimals, dec_point, thousands_sep) { 
// *  example: number_format(1234.56, 2, ',', ' '); 
// *  return: '1 234,56' 
    number = (number + '').replace(',', '').replace(' ', ''); 
    var n = !isFinite(+number) ? 0 : +number, 
      prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), 
      sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, 
      dec = (typeof dec_point === 'undefined') ? '.' : dec_point, 
      s = '', 
      toFixedFix = function (n, prec) { 
       var k = Math.pow(10, prec); 
       return '' + Math.round(n * k)/k; 
      }; 
    // Fix for IE parseFloat(0.55).toFixed(0) = 0; 
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.'); 
    if (s[0].length > 3) { 
     s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep); 
    } 
    if ((s[1] || '').length < prec) { 
     s[1] = s[1] || ''; 
     s[1] += new Array(prec - s[1].length + 1).join('0'); 
    } 
    return s.join(dec); 
}