Question

以下一组代码用于使用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);
?>

这是json脚本

$(function() {
    $.ajax({

       url: 'http://localhost/GP/Charts/chart_data.php',
        type: 'GET',
        success: function(data) {
            chartData = data;
            var chartProperties = {
                "caption": "Top 10 wicket takes ODI Cricket in 2015",
                "xAxisName": "Player",
                "yAxisName": "Wickets Taken",
                "rotatevalues": "1",
                "theme": "zune"
            };

            apiChart = new FusionCharts({
                type: 'column2d',
                renderAt: 'chart-container',
                width: '550',
                height: '350',
                dataFormat: 'json',
                dataSource: {
                    "chart": chartProperties,
                    "data": chartData
                }
            });
            apiChart.render();
        }
    });
});

下面的代码给出了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>

根据我所遵循的教程，它应该在执行html代码时生成图表！但是当它执行时没有图表出现但只有文字说明 “FusionCharts将在这里呈现”出现如何更正代码以生成图表？我遵循本教程exaclty http://www.fusioncharts.com/dev/using-with-server-side-languages/tutorials/php-mysql-charts.html

Answer 1

我猜你没有正确安装jquery。单击here下载jquery并将其复制到上面创建的js文件夹下。

Answer 2

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

应该是

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

Answer 3

我认为你应该将所有脚本文件保存在head标签内，以便在dom（div）加载之前加载它们。尝试一下

使用JS库生成图表

3 个答案: