Chart.js 2.0 Formatieren der Y-Achse mit Währungstrennzeichen und Tausendertrennzeichen

Question

Ich habe Probleme mit der Formatierung meiner Diagrammachse, und ich kann kein Beispiel für die aktualisierte Version 2.0 finden.

Wie kann ich (zum Beispiel) 2000000 bis € 2.000.000 machen?

Meine Geige: 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

The Fix

eine Funktion in userCallback zuweisen, wenn das Objekt Konfiguration zu erstellen. Dies wird beim Erstellen der Teilstriche aufgerufen. Sie Dokumentation bei 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

Für die Verwendung von Version zu finden: 2.5.0, hier ist eine Erweiterung. Mit diesem können Sie auch die Mengen in Tooltips des Diagramms zu formatieren, nicht nur die ‚Ticks‘ in der ‚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); 
      } 
     } 
    } 
} 

Hier ist die number_format() Funktion, was ich bin mit:

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