[Редактировать: проблема решена, см. Решение в конце, которое показывает код, реализующий принятый, рабочий ответ WhiteHat.Я оставил здесь исходный пример нерабочего кода, потому что он реализует два разных принятых решения, которые в этом случае не работают.Я надеюсь, что примеры «до» и «после» будут полезны другим, кто может наткнуться на этот путь]
Я не могу заставить NumberFormat () Google Chart вставлять запятые в группы по тысячам и / или добавлять валютуусловное обозначение.Тот же шаблон форматирования, который я использую для моей вертикальной оси, работает правильно.
Я попробовал два принятых решения ( здесь) и (здесь) , но безуспешно,Первое принятое решение использует шаблон в числовом форматере, второе использует символ группировки.
Вот снимок того, как выглядит моя диаграмма (добавлена зеленая и красная разметка для иллюстрации проблемы):
Что странно, я могу правильно использовать шаблон для форматирования вертикальной оси (см. Зеленые галочки), но то же самое не будет работать с форматером чисел (красные галочки).
Вот мой код для числового формата, который, как я понимаю, ДОЛЖЕН дать мне значения, разделенные запятыми в теле моего графика:
var formatter = new GoogleCharts.api.visualization.NumberFormat({
negativeColor: 'red',
negativeParens: true,
pattern: currencySymbol + '###,###',
});
formatter.format(data, 1);
currencySymbol простостроковая переменная, содержащая, в данном случае, символ мексиканского песо.Однако в случае, если это вызвало проблему, я попытался удалить ее и просто использовать следующее форматирование:
var formatter = new GoogleCharts.api.visualization.NumberFormat({
negativeColor: 'red',
negativeParens: true,
pattern:'###,###',
});
formatter.format(data, 1);
Результат тот же, хотя в теле диаграммы нет запятых.
Чтосбивает с толку то, что, если вы посмотрите на мое форматирование по вертикальной оси, тот же самый шаблон, указанный в опциях моей диаграммы, дает мне именно те результаты, которые я хочу получить по вертикальной оси.
vAxis: {
format: currencySymbol + '###,###',
maxValue: 350,
},
Как уже упоминалось, я такжепопробовал альтернативный принятый ответ переполнения стека, где я указал символ группировки, например, такой, но он также не работает:
var formatter = new GoogleCharts.api.visualization.NumberFormat({
negativeColor: 'red',
negativeParens: true,
prefix: currencySymbol,
groupingSymbol: ',',
});
formatter.format(data, 1);
[РЕДАКТИРОВАТЬ: WhiteHat в своем принятом ответе решил проблему.Ниже приведен рабочий код.В надежде помочь сообществу я оставил нерабочий пример кода на месте выше, так как другие могут пойти по тому же пути (этот путь является одним из принятых ответов StackOverflow, которые не работают в этом случае)]
Вот мой переработанный код, который строит данные и аннотации:
let dataToBind = [['Year', 'Revenue', { role: 'style' }, { role: 'annotation' }]];
let currencySymbol: string = convertCurrencyToSymbol(this.data.currencyCode);
var formatter = new GoogleCharts.api.visualization.NumberFormat({
negativeColor: 'red',
negativeParens: true,
pattern: currencySymbol + '###,###',
});
let mappedData: any = this.data.chartData.map(d => [d.year, d.revenue, `opacity: 0.5; fill-color:${this.getNextColor()}`, `${**formatter.formatValue(d.revenue)**}`]);
dataToBind.push(...mappedData);
let data = GoogleCharts.api.visualization.arrayToDataTable(dataToBind);
Как указывает WhiteHat, применение formatter.formatValue () к КАЖДОЙ аннотации является способом решения этой проблемы.Как упоминалось ранее, переменная currencySymbol - это просто строковая переменная, которую я загружаю из локальной функции, чтобы я мог получить правильное значение для песо, евро и т. Д.
Вот как выглядит мой график после применения этогоменять.Это желаемый эффект с запятыми и символами валюты:
