Javascript 使用JS库生成图表_Javascript_Php_Mysql_Json_Charts

Javascript 使用JS库生成图表

javascript php mysql json charts

Javascript 使用JS库生成图表,javascript,php,mysql,json,charts,Javascript,Php,Mysql,Json,Charts,以下代码集用于使用fusionchart javascript库生成图表！这是php脚本 <?php //address of the server where db is installed $servername = "localhost"; //username to connect to the db //the default value is root $username = "chart"; //password to connect to the db //th

以下代码集用于使用fusionchart javascript库生成图表！这是php脚本

   <?php
//address of the server where db is installed
$servername = "localhost";

//username to connect to the db
//the default value is root
$username = "chart";

//password to connect to the db
//this is the value you would have specified during installation of WAMP stack
$password = "L12345d";

//name of the db under which the table is created
$dbName = "test";

//establishing the connection to the db.
$conn = new mysqli($servername, $username, $password, $dbName);

//checking if there were any error during the last connection attempt
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

//the SQL query to be executed
$query = "SELECT * FROM top_odi_wicket_takers";

//storing the result of the executed query
$result = $conn->query($query);

//initialize the array to store the processed data
$jsonArray = array();

//check if there is any data returned by the SQL Query
if ($result->num_rows > 0) {
  //Converting the results into an associative array
  while($row = $result->fetch_assoc()) {
    $jsonArrayItem = array();
    $jsonArrayItem['label'] = $row['player'];
    $jsonArrayItem['value'] = $row['wickets'];
    //append the above created object into the main array.
    array_push($jsonArray, $jsonArrayItem);
  }
}

//Closing the connection to DB
$conn->close();

//set the response content type as JSON
header('Content-type: application/json');
//output the return value of json encode using the echo function. 
echo json_encode($jsonArray);
?>

下面的代码给出了html代码

<!DOCTYPE html>
<html>
<head>
  <title>Fusion Charts Column 2D Sample</title>
</head>
<body>
  <div id="chart-container">FusionCharts will render here</div>
  <script src="js/jquery-2.1.4.js"></script>
  <script src="js/fusioncharts.js"></script>
  <script src="js/fusioncharts.charts.js"></script>
  <script src="js/themes/fusioncharts.theme.zune.js"></script>
  <script src="js/app.js"></script>
</body>
</html>


融合图列2D示例
FusionCharts将在此处渲染

根据我遵循的教程，它应该在执行html代码时生成图表！但当它执行时，没有出现图表，只有一个文本说明 “FusionCharts将在此处呈现”出现。如何更正代码以生成图表？我很仔细地学习了这个教程

应该是

require('http://localhost/GP/Charts/chart_data.php')

我认为你应该把所有的脚本文件都放在head标记中，这样它们就可以在dom（div）加载之前加载。试试看吧，我想你没有正确安装jquery。单击下载jquery并将其复制到上面创建的js文件夹下。

很抱歉，根据教程，它应该是url:''，但仍然不起作用！当您使用浏览器进入页面时，您会看到什么？topI上会出现一个文本“fusion charts will render here”（融合图表将在此处呈现）。我不是在询问您的主html文件。我在询问您的chart_data.php。它给了你json吗？是的！[{“标签”：“CJ Anderson”，“值”：“25”}，{“标签”：“Imran Tahir”，“值”：“25”}，{“标签”：“JH Davey”，“值”：“21”}，{“标签”：“M Morkel”，“值”：“21”}，{“标签”：“MA Starc”，“值”：“34”}，{“标签”：“ST Finn”，“值”：“27”}，{“标签”：“TA您确定http调用正在返回一些数据吗。。？试着安慰回应并检查。。通过这种方式，我们可以发现这是后端问题还是前端无数据！仅显示“FusionCharts将在此处渲染”文本

require('http://localhost/GP/Charts/chart_data.php'')

require('http://localhost/GP/Charts/chart_data.php')