2016-04-28 20 views
10

Tôi gặp sự cố với định dạng trục biểu đồ của mình và tôi không thể tìm thấy ví dụ cho phiên bản cập nhật 2.0.Định dạng biểu đồ Y Trục với biểu đồ tiền tệ và hàng nghìn dấu tách

Làm cách nào để tôi (ví dụ) kiếm được 2000000 đến € 2.000.000?

fiddle tôi: 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 
     } 
    }); 
}; 

Trả lời

25

Cách khắc phục

Gán một hàm thành userCallback khi tạo đối tượng config. Điều này được gọi khi tạo dấu tick. Bạn có thể tìm tài liệu tại 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; 
     } 
    } 
}] 
+3

Cảm ơn rất nhiều @L Bahr! Tôi đã bỏ qua chức năng đó. Mã của bạn thêm a. trước số âm. (Ví dụ -500000 trở thành -.500.000> Vì vậy, tôi đã thay thế việc chia nhỏ bằng cách thay thế. Đây là một câu hỏi mới https://jsfiddle.net/Hiuxing/4sLxyfya/8/ – Mae

+0

Hoàn hảo! Hãy gửi cho tôi đúng con đường để làm cho nó hoạt động cho bản thân mình – vanhornRF

1

Đối với những người sử dụng Version: 2.5.0, đây là một nâng cao. Với điều này, bạn cũng có thể định dạng số trong tooltips của bảng xếp hạng, không chỉ là 've' trong '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); 
      } 
     } 
    } 
} 

Đây là number_format() chức năng là những gì tôi đang sử dụng:

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); 
} 
Các vấn đề liên quan