Chart.js 2.0 Y Ekseni Para Birimi ve Bin Ayırıcı ile Biçimlendirme

Question

Grafik eksenimi biçimlendirmede sorun yaşıyorum ve güncelleştirilmiş sürüm 2.0 için bir örnek bulamıyorum.

Nasıl (örneğin) 2000000 ila 2.000.000 € yapabilirim?

Benim keman: 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 yapılandırma nesnesi oluştururken

userCallback içine bir işlev atayın. Bu, onay işaretlerini oluştururken çağrılır. Sen Versiyon kullananlar için 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

adresinden belgeleri bulabilirsiniz: 2.5.0, burada bir geliştirmedir. Bu ile, aynı zamanda içinde grafikte, sadece 'kene' arasında tooltips miktarlarda biçimlendirebilirsiniz 'yAxes İşte

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

ben ne kullanıyorum number_format() fonksiyonudur:

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