Как настроить всплывающие подсказки для отображения процентов в соответствии с осью в линейной диаграмме визуализации Google?

Всплывающие подсказки можно настроить для отображения процентов с помощью следующего кода:

var formatter = new google.visualization.NumberFormat({
      fractionDigits: 2,
      suffix: '%'
    });
formatter.format(data, 1); // Apply formatter to first column.

Есть ли способ для NumberFormat умножить каждый элемент на 100? В противном случае всплывающая подсказка отображается как 0,50%.

Я использую vAxis.format = "format:'#%' ", который умножается на 100. Таким образом, 0,5 отображается как 50% по вертикальной оси.

Согласно документации (icu-project.org/apiref), это можно перезаписать, заключив % в одинарные кавычки, но это не сработало.

Конечным результатом является то, что всплывающие подсказки не соответствуют оси. Как лучше всего это сделать?


google-visualization number-formatting linechart
person B Seven    schedule 17.07.2011    source источник

Ответы (4)


arrow_upward
22
arrow_downward

Я получил это, указав средство форматирования точно так же, как вы:

var chartData = google.visualization.arrayToDataTable(tableData);
var formatter = new google.visualization.NumberFormat({
    fractionDigits: 2,
    suffix: '%'
});
formatter.format(chartData, 1);

1 в последнем вызове означает второй столбец, в котором у меня есть значения с плавающей запятой.

Затем я указываю формат оси в параметрах диаграммы, избегая знака процента, как указано в документации и других здесь:

var chartOptions = {
    vAxis: { format: '#\'%\'' }
};

Затем рисую график:

var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(chartData, chartOptions);

Это отображает левую ось со значениями, такими как 10%, 20% и так далее. И всплывающие подсказки выглядят как стандартные, но с процентами вроде 10.10%, 20.20% и так далее.

Если вы хотите, чтобы две цифры дроби также были на левой боковой оси, вместо этого используйте этот формат в параметрах диаграммы:

vAxis: { format: '#.00\'%\'' }
person Markus Amalthea Magnuson    schedule 06.07.2013
comment
Спасибо за этот трюк с заключением % в одинарные кавычки, иначе значения оси умножаются на 100! Свел меня с ума... - person Chris Lewis; 13.05.2014
comment
Я думаю, важно отметить, что вы должны отформатировать диаграмму, прежде чем рисовать диаграмму. Я не мог понять, почему это не работает для меня... это потому, что я пытался использовать formatter.format(chartData, 1) ПОСЛЕ того, как я уже создал диаграмму. В моем случае у меня было несколько столбцов, которые требовали форматирования, поэтому я поместил этот код в свой скрипт 4 раза, каждый с другим номером столбца. - person Kenny Johnson; 24.09.2015

arrow_upward
7
arrow_downward 

var formatter = new google.visualization.NumberFormat({ 
  pattern: '#%', 
  fractionDigits: 2
});

Благодаря http://groups.google.com/group/google-visualization-api/

person B Seven    schedule 09.12.2011
comment
Правильно, просто добавьте свою строку: formatter.format(data, 1); - person Tom Stickel; 11.06.2015

arrow_upward
3
arrow_downward

Вы должны заключить сам символ процента (%) в одинарные кавычки.

Строка, которую я использовал для этого, выглядит так: options['vAxis'] = {'format': "#,###'%'"};

Объединив это с вашим средством форматирования выше, вы можете сделать так, чтобы вертикальная ось имела символ процента, а также включить его во всплывающую подсказку.

person Xentac    schedule 30.08.2011
comment
Я не думаю, что это повлияет на всплывающие подсказки. Я думаю, что он устанавливает метки оси. - person B Seven; 09.12.2011

arrow_upward
2
arrow_downward

Хорошо... Так что это немного поздно. Признаюсь, семь лет назад мне это было не нужно. Тем не менее, это сработало для меня.

var rows = data.getNumberOfRows();

for (var i = 0; i < rows; i++) {
    data.setFormattedValue(i, 4, (data.getFormattedValue(i, 4)*100).toFixed(1) + "%"); //LY
    data.setFormattedValue(i, 3, (data.getFormattedValue(i, 3)*100).toFixed(1) + "%"); //TY
}

В моем случае я использую четыре столбца, два из которых назначены на правую ось с процентами. Я хотел, чтобы всплывающие подсказки этих столбцов отражали правильный процент, а не десятичное представление.

Вот ссылка на документы Google:

https://developers.google.com/chart/interactive/docs/reference#DataTable_setFormattedValue

Я надеюсь, что это поможет какому-нибудь случайному незнакомцу, ищущему его. ;)

person DanimalReks    schedule 19.02.2018