javascript - 从外部 json 代码将数据添加到 amcharts 图表

Question

我有一个图表，需要使用数据库中的数据进行操作。因此我将数据库中的数据转换为 JSON 字符串。问题是我不知道如何将收到的 JSON 数据集成到图表中。

这些是完成这项工作所需的文件:

PHP 和 PDO 查询:

    <?php 
/*host = 'localhost' Namecheap default. Could also use 127.0.0.1 */ 

try { 
$connection= new PDO('mysql:host=localhost;dbname=clicrckc_andfit','clicrckc_osherdo','3563077'); 
$connection->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); 
$sql="SELECT answer_vegitable,answer_cigarettes,answer_workout FROM answers where user_id=58";  
$row=$connection->prepare($sql); 
$row->execute(); 
$result=$row->fetchAll(PDO::FETCH_ASSOC); 
$main = array('data'=>$result,'value'=>array("bgcolor"=>"#f1fff1","message"=>"All records displayed")); 
echo json_encode($main); 
$connection = null; 
    } 

    catch (PDOException $e) { 
    print "Error!: " . $e->getMessage() . "<br/>"; 
    die(); 
} 

?>

图表创建和操作所需的 HTML 和 JS:

<title>Statistics Chart</title>
        <script src="../amcharts_3.13.1.free/amcharts/amcharts.js" type="text/javascript"></script>
        <script src="../amcharts_3.13.1.free/amcharts/serial.js" type="text/javascript"></script>
        
        <script type="text/javascript">

  AmCharts.loadJSON = function("barClustered.php") {
  // create the request
  if (window.XMLHttpRequest) { // XMLHttpRequest object is the keystone of AJAX, and it is used to exchange small 
                               //amounts of data with the server.
  
    // IE7+, Firefox, Chrome, Opera, Safari (modern browsers).
    var request = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    var request = new ActiveXObject('Microsoft.XMLHTTP');
  }

  // load it
  // the last "false" parameter ensures that our code will wait before the
  // data is loaded
  request.open('GET',"barClustered.php", false); //Type of request,The acutal URL, asynchronously or not?
  request.send(); // Send request to the server.
   // Adding code after the send method in case of synchronous request (like the one above).
  // parse and return the output
  return eval(request.responseText); // responseText is getting the response data as a string.
};
        </script>
        
<!-- The chart code -->

<script>
            var chart;

            var chartData = [
                 
                {
                    "questions": "Vegtables Eaten",
                    "This Week": 30.1,
                    "Last Week": 23.9,
                    "2 Weeks Ago": 27.5
                },
                {
                    "questions": "Workout (Minutes)",
                    "This Week": 29.5,
                    "Last Week": 25.1,
                    "2 Weeks Ago": 26.4
                },
                {
                    "questions": "Cigarettes smoked",
                    "This Week": 24.6,
                    "Last Week": 25,
                    "2 Weeks Ago": 28
                }
            ];


            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "questions";
                chart.startDuration = 1;
                chart.plotAreaBorderColor = "#DADADA";
                chart.plotAreaBorderAlpha = 1;
                // this single line makes the chart a bar chart
                chart.rotate = true;

                // AXES
                // Category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.gridPosition = "start";
                categoryAxis.gridAlpha = 0.1;
                categoryAxis.axisAlpha = 0;

                // Value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.axisAlpha = 0;
                valueAxis.gridAlpha = 0.1;
                valueAxis.position = "top";
                chart.addValueAxis(valueAxis);

                // GRAPHS
                // first graph
                var graph1 = new AmCharts.AmGraph();
                graph1.type = "column";
                graph1.title = "This Week";
                graph1.valueField = "This Week";
                graph1.balloonText = "This Week:[[value]]";
                graph1.lineAlpha = 0;
                graph1.fillColors = "#ADD981";
                graph1.fillAlphas = 1;
                chart.addGraph(graph1);

                // second graph
                var graph2 = new AmCharts.AmGraph();
                graph2.type = "column";
                graph2.title = "Last Week";
                graph2.valueField = "Last Week";
                graph2.balloonText = "Last Week:[[value]]";
                graph2.lineAlpha = 0;
                graph2.fillColors = "#81acd9";
                graph2.fillAlphas = 1;
                chart.addGraph(graph2);
                
                // Third graph
                var graph3 = new AmCharts.AmGraph();
                graph3.type = "column";
                graph3.title = "2 Weeks Ago";
                graph3.valueField = "2 Weeks Ago";
                graph3.balloonText = "2 Weeks Ago:[[value]]";
                graph3.lineAlpha = 0;
                graph3.fillColors = "#9972C1";
                graph3.fillAlphas = 1;
                chart.addGraph(graph3);                       
             
                // LEGEND
                var legend = new AmCharts.AmLegend();
                chart.addLegend(legend);

                chart.creditsPosition = "top-right";

                // WRITE
                chart.write("chartdiv");
            });
        </script>

<script src="http://www.click-and-fit.me/amcharts_3.13.1.free/amcharts/serial.js"></script>
<script src="http://click-and-fit.me/amcharts_3.13.1.free/amcharts/amcharts.js"></script>

    <body>
        <div id="chartdiv" style="width:500px; height:600px;"></div>
    </body>

这些是上面的 2 个正在运行的文件:

http://click-and-fit.me/barClustered.php

统计图表

这是我想在图表中显示的数据库中 3 行的屏幕截图:

http://www.codingforums.com/redirect-to/?redirect=http%3A%2F%2Fimgbox.com%2FHfD1PuTQ

目前图表中填充的是手动输入的 JSON 格式数据。如何从 php 文件获取 JSON 字符串以在购物车数据中进行操作？尝试查看所有 amcharts 文档，但仍然无法理解如何操作。

提前致谢!

Answer 1

尝试以下操作:

改变

AmCharts.loadJSON = function("barClustered.php") {
    if (window.XMLHttpRequest) {
        var request = new XMLHttpRequest();
    } else {
        var request = new ActiveXObject('Microsoft.XMLHTTP');
    }
    request.open('GET', "barClustered.php", false);
    request.send();
    return eval(request.responseText);
};

至

AmCharts.loadJSON = function(url) {
    if (window.XMLHttpRequest) {
        var request = new XMLHttpRequest();
    } else {
        var request = new ActiveXObject('Microsoft.XMLHTTP');
    }
    request.open('GET', url, false);
    request.send();
    return eval(request.responseText);
};

改变

chart.dataProvider = chartData;

至

chart.dataProvider = AmCharts.loadJSON('http://click-and-fit.me/barClustered.php');