Подтвердить что ты не робот

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

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

Я использую параметр scaleLabel, чтобы поместить символ $USD перед значением:

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

и функцию для вставки разделителя запятой:

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

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

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

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

Спасибо за любую помощь.

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 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;
              }
            }
          }
        }]
      }
    }
  });

Снова, кредит идет на Billy Moon Answer для функции форматирования метки.

Ответ 3

Я в основном суммирую то, что упомянули другие, но я думаю, что самым чистым решением этого точного (и часто встречающегося) вопроса является использование метода toLocaleString с форматированием валюты в долларах США:

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

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

Примечание. Для версии Chart.js 2+ (выпущенной в апреле 2016 г.) для расширенного форматирования тиков необходимо использовать метод callback:

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 версии 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"});
}

Благодарим Перри Тью за ссылку на изменение синтаксиса и mfink за идею использовать toLocaleString.

Ответ 4

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

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(), который преобразует его в положительный.

Ответ 5

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

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

Chart.scaleService.updateScaleDefaults('linear', {
    ticks: {
        callback: function (value, index, values) {
            return value.toLocaleString();
        }
    }
});

Ответ 6

Если вы используете Charts.js для Angular 2+ (ng2-charts), вы можете использовать CurrencyPipe. Вот как я отформатировал метку:

Вставьте зависимость в ваш файл page.ts:

import { CurrencyPipe } from '@angular/common';

Вот как я называю это в опциях моего графика:

public chartOptions: any = {
        responsive: true,
        legend: {
            display: false,
            labels: {
                display: false
            }
        },
        tooltips: {
          enabled: true,
          mode: 'single',
          callbacks: {
            label: function(tooltipItem, data) {
              let label = data.labels[tooltipItem.index];
              let datasetLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
              let currencyPipe = new CurrencyPipe('en');
              let formattedNumber = currencyPipe.transform(datasetLabel, 'USD', 'symbol');
              return label + ': ' + formattedNumber;
            }
          }
        }
    };

Ответ 7

Используя chartjs v2.8.0, посмотрев документы, я нашел его здесь.

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

import numeral from 'numeral'

options: {
  scales: {
    yAxes: [{
      ticks: {
        callback: function (value, index, values) {
          // add comma as thousand separator
          return numeral(value).format('0,0')
        },
      }
    }]
  },
  tooltips: {
    callbacks: {
      label: function (tooltipItem, data) {
        var label = data.datasets[tooltipItem.datasetIndex].label || ''

        if (label) {
          label += ': '
        }
        label += numeral(tooltipItem.yLabel).format('0,0')
        return label
      },
    },
  },
}

Вы можете использовать format('$ 0,0') чтобы добавить символ валюты вместе с разделителем запятых тысяч.

Ответ 8

Существует специальная функция JavaScript для преобразования длинного числа в число, отформатированное в соответствии с настройками системы: toLocaleString().

Вы можете указать, что метка каждого тика (или определенного тика, идентифицируемого его индексом номера) должна быть построена вашей собственной функцией, добавив ключевое слово "callback:" в опциях тика:

До:

        ticks: {
                  max: maxAltitude,
                  min: 0
                }

После:

        ticks: {
                  max: maxAltitude,
                  min: 0, // <--- dont' foget to add this comma if you already have specified ticks options
                    callback:  
                      function(value, index, valuesArray) {
                          // value: currently processed tick label
                          // index of currently processed tick label
                          // valuesArray: array containing all predefined labels
                          return  value.toLocaleString(); 
                      } // Function end
                } // Ticks options end

Без комментариев и без неиспользуемых переменных:

        ticks: {
                  max: maxAltitude,
                  min: 0, 
                  callback:  
                      function(value) {
                        return  value.toLocaleString(); 
                      }
                }