Google Charts - Sơ đồ tổ chức
Sơ đồ tổ chức giúp hiển thị hệ thống phân cấp các nút, được sử dụng để miêu tả các mối quan hệ cấp trên / cấp dưới trong một tổ chức. Ví dụ: Cây gia đình là một loại biểu đồ tổ chức .. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, chúng ta hãy xem ví dụ hoàn chỉnh.
Cấu hình
Chúng tôi đã sử dụng OrgChart lớp để hiển thị biểu đồ dựa trên tổ chức.
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));Thí dụ
googlecharts_organization_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['orgchart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
['Alice', 'Robert', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Set chart options
var options = {allowHtml:true};
// Instantiate and draw the chart.
var chart = new google.visualization.OrgChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Kết quả
Xác minh kết quả.