Chart.js 2.0使用貨幣和千位分隔符格式化Y軸

Question

我在格式化圖表軸時遇到了問題，而我無法找到更新版本2.0的示例。

我怎麼能（例如）2000000到€2,000.000？

我的小提琴：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

的修復

創建配置對象時指定的功能到userCallback。這在創建刻度標記時被調用。您可以在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

對於使用版本的找到文檔：2.5.0，這裏是一個提高。有了這個，你還可以在格式化量的圖表，不僅是「蜱」的工具提示「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); 
      } 
     } 
    } 
} 

這裏是number_format（）函數，我使用的是什麼：

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