javascript - 使用 oracle 查询创建图表

Question

我正在尝试使用 Oracle 数据库的查询创建一个图表饼图。 我已经连接到数据库并回显结果，但我无法创建图表。对此有什么建议吗？

<?php
$tns = "  
(DESCRIPTION =
    (ADDRESS_LIST =
      (ADDRESS = (PROTOCOL = TCP)(HOST = xxx.xxxx.xxx.xxx)(PORT = xxxx))
    )
    (CONNECT_DATA =
      (SERVICE_NAME = XE)
    )
  )
       ";
$db_username = "xxx";
$db_password = "xxxxR";
try{
    $conn = new PDO("oci:xxxx=".$tns,$db_username,$db_password);
}catch(PDOException $e){
    echo ($e->getMessage());
}
if (!$conn) {
   $m = oci_error();
   echo $m['message'], "\n";
   exit;
}
else {
   echo "Connected to Oracle!";
}
 
$query = "SELECT T71.C_C1003000015, COUNT (T71.C1)
  FROM ICT_DATABASE.T71 T71
WHERE (T71.C_C1003000015 NOT IN (exelllllllllxx.xxxx.xxx'))
       AND trunc(T71.ARRIVAL_DATE) = trunc(sysdate)
GROUP BY T71.C_C1003000015";
 
$stmt = $conn->prepare($query);
 
if ($stmt->execute()) {
    echo "<h4>$query</h4>";
    echo "<pre>";
    while ($row = $stmt->fetch()) {
        print_r($row);
    }
    echo "</pre>";
	}
	
	
?>

该代码正在运行并导出数据，我现在如何创建图表？

Answer 1

好的，开始了。

您需要将 Google 的脚本添加到您的页面。

<script src="https://www.google.com/jsapi"></script>

将此 div 添加到您想要图表的位置...

<div id="piechart" style="width: 900px; height: 500px;"></div>

然后添加此 JavaScript，假设您将输出保留在 <pre> 中元素

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var googleArray = [];
  googleArray.push(['Department', 'Value']);
  var testRow = document.getElementsByTagName('PRE')[0].innerHTML;
  var testArr = testRow.split('IT-EXT-COSMOTE-');
  var deptSplit;

  for (var i = 0; i < testArr.length; i++) {
    if (testArr[i] !== '') {
      deptSplit = testArr[i].split(' - ');
      googleArray.push([deptSplit[0], Number(deptSplit[1])]);
    }
  }

  var dataTable = new google.visualization.arrayToDataTable(googleArray, false);
  var chartOptions = {title: 'Department Totals'};
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(dataTable, chartOptions);
}

如果您需要进一步帮助，请告诉我...