Как настроить всплывающие подсказки (текст и формат) в гистограммах Google Vizualization?

Question

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

Я изучил документацию, но не нашел способа реализовать этот. Знаете ли вы:

1. Возможно ли это ?
2. Если да, не могли бы вы привести примеры кода?

Answer 1

Вы можете изменить форматирование номера с помощью класса google.visualization.NumberFormat.

var formatter = new google.visualization.NumberFormat({
    fractionDigits: 0,
    prefix: '$'
});

formatter.format(data, 1); // Apply formatter to second column.

Если вам нужна большая гибкость, взгляните на класс PatternFormat.

Вот справочник API .

Answer 2

Создайте новый тип данных для того, что вы хотите во всплывающей подсказке:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Game');
data.addColumn('number', 'Transactions');
data.addColumn({type:'string', role:'tooltip'}); // here is the tooltip line

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

['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']
['$FormatedWeekday', $SalesAll,'$ToolTip']

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

$ToolTip = ''.$FormatedWeekday.' \u000D\u000A '.$SalesAll.' \u000D\u000A '."Red Cross  Event";

"\ u000D \ u000A" вызывает разрыв строки

Answer 3

Похоже, что теперь вы можете настроить текст всплывающей подсказки, добавив специальный столбец с role: 'tooltip': https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

Answer 4

Существует очень простой способ сделать это, вам просто нужно использовать один из Formatters для данных:

// Set chart options
var options = {
hAxis: {format: 'MMM dd, y'}
};

// Format the data
var formatter = new google.visualization.DateFormat({pattern:'EEEE, MMMM d, y'});
formatter.format(data,0);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('visualization'));
chart.draw(data, options);

Вы просто форматируете ось иначе, чем формат данных, поскольку формат данных будет отображаться только при наведении мыши.

Answer 5

Google Chart не поддерживает формат всплывающей подсказки html LineChart, BarChart. Я использую:

google.visualization.events.addListener(chart, 'onmouseover', function(rowColumn){
                                myFunction();
                            });

в myFunction(): вы можете использовать popup для отображения дополнительной информации.

Answer 6

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

Оригинальный код был:

data.setValue (0, 0, «Рождественские елки»);

data.setValue (0, 1, 410000000);

А во всплывающей подсказке будет показано "Рождественские елки 410000000 4,4%".

Чтобы отформатировать текст, я добавил строку в код, так что это было:

data.setValue (0, 0, «Рождественские елки»);

data.setValue (0, 1, 410000000);

data.setFormattedValue (0, 1, "410 миллионов долларов");

В результате появилась всплывающая подсказка «Рождественские елки $ 410 млн. 4,4%»

Надеюсь, это поможет!

Answer 7

К вашему сведению, все:

Google добавил пользовательские подсказки HTML / CSS в сентябре 2012 года: https://google -developers.appspot.com / график / интерактивный / документы / customizing_tooltip_content

Answer 8

Еще один способ сделать это - добавить в ваши данные еще один столбец, который будет действовать как всплывающая подсказка.

function drawVisualization() {
    data = new google.visualization.DataTable()
    data.addColumn('string', 'Date');
    data.addColumn('number');
    data.addColumn({type:'string',role:'tooltip'});
    data.addRow();
    base = 10;
    data.setValue(0, 0, 'Datapoint1');
    data.setValue(0, 1, base++);
    data.setValue(0, 2, " This is my tooltip1 ");

    data.addRow();
    data.setValue(1, 0, 'Datapoint2');
    data.setValue(1, 1, base++);
    data.setValue(1, 2, "This is my second tooltip2");

    // Draw the chart.
    var chart = new google.visualization.BarChart(document.getElementById('visualization'));
    chart.draw(data, {legend:'none', width:600, height:400});
}

Answer 9

Посмотрите на Роли DataTable и пример подсказки: https://developers.google.com/chart/interactive/docs/roles

label: 'Year',   'Sales',         null,   'Expenses',         null
`role: domain,     data,       tooltip,         data,      tooltip`
     '2004',       1000,    '1M$ sales,          400,    '$0.4M expenses
                       in 2004'                     in 2004'
     '2005',       1170, '1.17M$ sales,          460,    '$0.46M expenses
                        in 2005'                    in 2005'
     '2006',        660,  '.66M$ sales,         1120,    '$1.12M expenses
                        in 2006'                    in 2006'
     '2007',       1030, '1.03M$ sales,          540,    '$0.54M expenses
                        in 2007'                    in 2007'

Метки null используются в качестве всплывающей подсказки для 'Продаж' и 'Расходы' соответственно.

Answer 10

Единственный способ, которым я нашел, чтобы отключить это, это пройти DOM в обработчике наведения (в любом случае для круговых диаграмм):

.

$ (pie.Ac.firstElementChild.contentDocument.childNodes [0] .childNodes [2] .childNodes [1] .firstChild.childNodes [2]) удалить ();

Что отвратительно и подчиняется тому, что Google поддерживает существующую структуру ... есть ли лучший способ?