2013-08-15 3 views
2

Я пытаюсь получить всплывающую подсказку выбранного объекта на диаграмме разброса Google. Я создаю мой DataTable следующим образом:Как получить значение всплывающей подсказки из графика Google Scatter Charts

data = google.visualization.arrayToDataTable([ 
    ['Lines changed', 'TTL', 'Tooltip'], 
    [25, 12, 'Text for first'], 
    [34, 20, 'Text for second'] 
]); 

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

google.visualization.events.addListener(chart, 'select', function() { 
    // when a point is selected 
    var selection = chart.getSelection(); 
    console.log(data.getValue(selection[0].row, selection[0].column)); // this gives me the Y-value for that row and index 
}); 

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

РЕДАКТИРОВАТЬ

Я может действительно добавить всплывающие подсказки с помощью метода arrayToDataTable() путем установки столбца свойство, как:

data.setColumnProperty(2, 'role', 'tooltip'); 

это делает третий столбец (индекс 2) всплывающую подсказку. Только я не могу (легко) добавить HTML в всплывающую подсказку, используя метод выше. Я должен был вернуться к использованию new google.visualization.DataTable().

ответ

6

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

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray: Двумерный массив, где каждая строка представляет собой строку в таблице данных. Если opt_firstRowIsData является ложным (по умолчанию), первая строка будет интерпретироваться как метки заголовка. Данные данных каждого столбца автоматически интерпретируются из приведенных данных. Если ячейка не имеет значения, укажите нулевое или пустое значение, если это необходимо. Вы не можете использовать значения Date или DateTime или нотацию объекта литерала JavaScript для значений ячейки .

использование addColumn/addRows вместо:

function drawVisualization() { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('number', 'Lines changed'); 
    dataTable.addColumn('number', 'TTL'); 

    // column for tooltip content 
    dataTable.addColumn({type: 'string', role: 'tooltip'}); 

    dataTable.addRows([ 
     [25, 12, 'Text for first'], 
     [34, 20, 'Text for second'] 
    ]); 

    // create and draw the visualization. 
    var chart = new google.visualization.ScatterChart(document.getElementById('visualization')); 
    chart.draw(dataTable); 
} 
google.setOnLoadCallback(drawVisualization); 

Приведенный выше код производит следующую диаграмму разброса:

enter image description here


Update

Полностью забыл вопрос :-) Вот как извлечь подсказку в случае щелчка (почти аналогично кода, просто обращаясь к DataTable, а):

google.visualization.events.addListener(chart, 'select', function() { 
    var selection = chart.getSelection(); 
    // this gives you 'Text for first'/'Text for second' etc 
    console.log(dataTable.getValue(selection[0].row, 2)); 
}); 
+0

На самом деле, я могу добавить подсказку, используя 'arrayToDataTable', см. Мое редактирование на вопрос. – mavili

+0

, но спасибо за ваш ответ, это полезно, хотя не ответ;) – mavili

2

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

google.visualization.events.addListener(chart, 'select', function() { 
    // when a point is selected 
    var selection = chart.getSelection(); 
    console.log(data.getValue(selection[0].row, selection[0].column + 1)); 
}); 

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