Как вы используете подсказку Google Chart и JSON для извлечения метаданных - PullRequest
Новая
       10

Как вы используете подсказку Google Chart и JSON для извлечения метаданных

0 голосов
/ 01 ноября 2018

Я строю организационную иерархическую диаграмму, используя Google charts API.

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

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

Выход на консоль после выполнения настроек

Как я мог пойти об этом? Вот код, который у меня есть: 

$table = array();
$table['cols'] = array(
array('label' => 'Name', 'type' => 'string'),
array('label' => 'Manager', 'type' => 'string'),
//array('role' => 'ToolTip', 'type' => 'string'),
);
$table['rows'] = array();

foreach ($employeeStruct as $row) {
$temp = array();
$temp[] = array('v' => $row['first_name']);
$temp[] = array('v' => $row['managers_first_name']);
$temp[] = array('v' => $row['work_city']);
$table['rows'][] = array('c' => $temp);
}
$jsonTable = json_encode($table);


<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- 
  fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Structured Organization</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> 
 </script>
<script type="text/javascript">
  google.charts.load('current', {packages:["orgchart"]});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
          var data = new google.visualization.DataTable(<?php echo $jsonTable; 
?>);
          data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': 
 true}});

          var options = {
              tooltip: {isHtml: true},
              legend: 'none',
              allowHtml: true,
              allowCollapse: true,
          };
          // Create and draw the visualization.
        var chart =  new 
    google.visualization.OrgChart(document.getElementById('chart_div'));
          chart.draw(data, options);
   }
   </script>

 </head>
 <body>
    <div id="chart_div"></div>
  </body>
  </html>

1 Ответ

0 голосов
/ 01 ноября 2018

похоже, что вы на правильном пути, удалите комментарий в следующей строке в php. 

array('role' => 'tooltip', 'type' => 'string'),

просто убедитесь, что роль состоит из строчных букв -> 'tooltip'

вы можете удалить строку addColumn в javascript. 

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

рекомендуем также удалить опцию подсказки. 

tooltip: {isHtml: true},

, если $row['work_city'] содержит html-контент, а не просто название города.

...