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

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

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

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

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

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

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

спасибо.

16
google-visualization linechart number-formatting

4 ответов

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

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

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

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

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\'%\'' }
21
var formatter = new google.visualization.NumberFormat({ 
  pattern: '#%', 
  fractionDigits: 2
});

спасибо http://groups.google.com/group/google-visualization-api/

7

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

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

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

3

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

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

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

2