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

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

16 голосов
/ 17 июля 2011

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

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 ), это можно перезаписать, заключив% в одинарные кавычки, но это не сработало.

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

Спасибо.

Ответы [ 4 ]

21 голосов
/ 06 июля 2013

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

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\'%\'' }
7 голосов
/ 09 декабря 2011 
var formatter = new google.visualization.NumberFormat({ 
  pattern: '#%', 
  fractionDigits: 2
});

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

3 голосов
/ 30 августа 2011

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

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

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

2 голосов
/ 20 февраля 2018

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

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

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

...