Как установить всплывающие подсказки для отображения процентов в соответствии с осью в линейке графиков визуализации 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), это может быть перезаписано путем включения% в одинарных кавычках, но это не сработало.

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

Спасибо.

Ответ 1

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

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

Ответ 2

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

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\'%\'' }

Ответ 3

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

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

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

Ответ 4

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

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
}

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

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

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

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