我有一个图表，需要使用数据库中的数据进行操作。因此，我将数据库中的数据转换为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>这是上面两个正在运行的文件：
http://click-and-fit.me/barClustered.php
统计图
以下是我想在图表中显示的数据库中的3行的屏幕截图：
http://www.codingforums.com/redirect-to/?redirect=http%3A%2F%2Fimgbox.com%2FHfD1PuTQ
目前，图表中填充了JSON格式的手动输入数据。如何从php文件中获取JSON字符串，以便在cart数据中进行操作？试图查看所有amcharts文档，但仍然无法理解如何做到这一点。
提前感谢！
尝试以下操作：
更改
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');