Charts.js Формат Y оси с обеих валютой и тысячами Separator

Question

Я использую Charts.js, чтобы показать график на моем сайте. В настоящее время метка отображается как длинная строка чисел (т. Е. 123456). Я хочу, чтобы показать, как валюты с разделителем (т.е. $ 123456)

Я использую опцию scaleLabel поставить символ $ USD до значения:

scaleLabel: "<%= ' $' + Number(value)%>" 

и функции, чтобы вставить разделитель запятой:

function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");} 

Я просто не знаю, как использовать их вместе, чтобы получить то, что я хочу.

Вот скрипка: http://jsfiddle.net/vy0yhd6m/79/

(пожалуйста, имейте в виду, что в настоящее время график будет работать только если вы удалите одну из этих двух частей JavaScript упоминавшееся выше)

Спасибо за любые вся помощь.

Answer 1

Вы должны быть в состоянии включить валютный префикс в составе наклейке внутри функции ...

var options = { 
    animation: false, 
    scaleLabel: 
    function(label){return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");} 
}; 

http://jsfiddle.net/vy0yhd6m/80/

Answer 2

Я новичок в chart.js, но вот то, что я должен был сделать, чтобы сделайте ответ Билли Мун с последней версией 2.1.6.

var data = { 
    labels: ["12 AM", "1 AM", "2 AM", "3 AM", "4 AM", "5 AM", "6 AM", "7 AM", "8 AM", "9 AM", "10 AM", "11 AM", "12 PM", "1 PM", "2 PM", "3 PM", "4 PM", "5 PM", "6 PM", "7 PM", "8 PM", "9 PM", "10 PM", "11 PM"], 
    datasets: [ 
     { 
     label: "Sales $", 
     lineTension: 0, 
     backgroundColor: "rgba(143,199,232,0.2)", 
     borderColor: "rgba(108,108,108,1)", 
     borderWidth: 1, 
     pointBackgroundColor: "#535353", 
     data: [65, 59, 80, 81, 56, 55, 59, 80, 81, 56, 55, 40, 59, 80, 81, 56, 55, 40, 59, 80, 81, 56, 55, 40] 
     } 
    ] 
    }; 

    //var myChart = 
    new Chart(document.getElementById('sales-summary-today'), { 
    type: 'line', 
    data: data, 
    options: { 
     animation: false, 
     legend: {display: false}, 
     maintainAspectRatio: false, 
     responsive: true, 
     responsiveAnimationDuration: 0, 
     scales: { 
     yAxes: [{ 
      ticks: { 
      beginAtZero: true, 
      callback: function(value, index, values) { 
       if(parseInt(value) >= 1000){ 
       return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
       } else { 
       return '$' + value; 
       } 
      } 
      } 
     }] 
     } 
    } 
    }); 

Снова, кредит отправляется на ответ Билли Муна для функции форматирования метки.

Answer 3

Добавление к ответу Перри Ти, в если у вас есть отрицательные суммы в долларах на ваши осях (например, при отображении прибыли/убытке графика), вы можете использовать это:

ticks: { 
    callback: function(value, index, values) { 
     if(parseInt(value) > 999){ 
      return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
     } else if (parseInt(value) < -999) { 
      return '-$' + Math.abs(value).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
     } else { 
      return '$' + value; 
     } 
    } 
} 

Правильный формат для отображения отрицательных валют - $ XXX, поэтому мы добавим -$ к значению, а затем запустим его через Math.abs(), который преобразует его в положительный.

Answer 4

Я в основном суммируя то, что другие говорили, но я думаю, что самое чистое решение этой точной (и часто встречающийся) вопрос заключается в использовании the toLocaleString method с USD валюты форматированием:

return value.toLocaleString("en-US",{style:"currency", currency:"USD"}); 

Это работает во всех современных браузеры. В Mozilla documentation for toLocaleString перечислены конкретные параметры совместимости браузера и параметры для других локалей, валют и типов форматирования (например, проценты).

Примечание Chart.js Версия 2+ (выпущен в апреле 2016 года) requires using the callback method для продвинутых клеща форматирования:

var chartInstance = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: { 
    scales: { 
     yAxes: [{ 
     ticks: { 
      callback: function(value, index, values) { 
      return value.toLocaleString("en-US",{style:"currency", currency:"USD"}); 
      } 
     } 
     }] 
    } 
    } 
}); 

Синтаксис, если вы используете Chart.js Version 1.X будет:

var myLineChart = new Chart(ctx).Line(data, options); 
var data = { 
    ... 
} 
var options = { 
    scaleLabel: function(label) { 
    return value.toLocaleString("en-US",{style:"currency", currency:"USD"}); 
} 

Кредит Перри Tew для referencing the syntax change, а также для использования для the idea для использования toLocaleString.

Answer 5

В chartjs v2.0, вы можете установить глобальные параметры, как это:

Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) { 
    return tooltipItem.yLabel.toLocaleString("en-US"); 
};