amcharts - 图形不显示值/使用 ajax 绘制 amcharrt/如何通过查询数据库绘制 amchart [英] amcharts - Graph not displaying values/Use ajax to plot amcharrt/How to plot amchart by querying database
问题描述
这里是我的 HTML &用于获取 amcharts 图的 javascript 代码
Here my HTML & javascript code to get amcharts plot going
我调用数据库,通过在 PHP & 中将其转换为 json 格式来检索结果.然后将其传递给图形进行显示.
I make a call to the database, retrieve the results by converting it to a json format in PHP & then pass it to a graph to display.
下面的chartData 变量具有数据库查询返回的输出.当我将预期输出静态分配给 chartData 变量时,图形会绘制.但是,当我分配 json 的 responseText 值重新调整的变量sql_resp"时,图形显示未定义"值.
The chartData variable below has the output that the database query returns. when I statically assign the expected output to chartData variable, the graph plots. However, when I assign the variable "sql_resp" which the responseText value of the json retuned, the graph says "undefined" values.
我使用了诸如 firebug 之类的网络工具来 100% 确定 json 确实会返回到结果中.这是我第一次使用 amcharts.有人可以帮助我理解我做错了什么.
I've used web tools such as firebug to be 100% sure that the json is indeed coming back in the result. This is the first time am using amcharts. Can someone please help me understand what I'm doing wrong.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/dashboard.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jsapi.js"></script>
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<script type="text/javascript">
var db_query = <?php echo json_encode($$db_query_1) ?>;
var sql_resp = $.ajax({
type: 'POST',
url: "mySQL.php",
data: {'db_q': db_query},
dataType: 'html',
context: document.body,
global: false,
async:false,
success: function(data) {
return data;
}
}).responseText;
alert(sql_resp);
var chartData = [{"OCCUR_DATE":"2015-06-01","FREQ":5296},{"OCCUR_DATE":"2015-06-02","FREQ":4880},{"OCCUR_DATE":"2015-06-03","FREQ":4721},{"OCCUR_DATE":"2015-06-04","FREQ":3322},{"OCCUR_DATE":"2015-06-05","FREQ":1909},{"OCCUR_DATE":"2015-06-06","FREQ":1422},{"OCCUR_DATE":"2015-06-07","FREQ":2722},{"OCCUR_DATE":"2015-06-08","FREQ":7505},{"OCCUR_DATE":"2015-06-09","FREQ":4920},{"OCCUR_DATE":"2015-06-10","FREQ":3434},{"OCCUR_DATE":"2015-06-11","FREQ":4637},{"OCCUR_DATE":"2015-06-12","FREQ":2025},{"OCCUR_DATE":"2015-06-13","FREQ":1597},{"OCCUR_DATE":"2015-06-14","FREQ":2241},{"OCCUR_DATE":"2015-06-15","FREQ":4606},{"OCCUR_DATE":"2015-06-16","FREQ":1980},{"OCCUR_DATE":"2015-06-17","FREQ":4266},{"OCCUR_DATE":"2015-06-18","FREQ":4222},{"OCCUR_DATE":"2015-06-19","FREQ":2162},{"OCCUR_DATE":"2015-06-20","FREQ":1555},{"OCCUR_DATE":"2015-06-21","FREQ":2694},{"OCCUR_DATE":"2015-06-22","FREQ":3098},{"OCCUR_DATE":"2015-06-23","FREQ":4529},{"OCCUR_DATE":"2015-06-24","FREQ":4726},{"OCCUR_DATE":"2015-06-25","FREQ":4923},{"OCCUR_DATE":"2015-06-26","FREQ":2278},{"OCCUR_DATE":"2015-06-27","FREQ":1671},{"OCCUR_DATE":"2015-06-28","FREQ":2530},{"OCCUR_DATE":"2015-06-29","FREQ":5875},{"OCCUR_DATE":"2015-06-30","FREQ":4769},{"OCCUR_DATE":"2015-07-01","FREQ":5310},{"OCCUR_DATE":"2015-07-02","FREQ":4728},{"OCCUR_DATE":"2015-07-03","FREQ":1553},{"OCCUR_DATE":"2015-07-04","FREQ":898},{"OCCUR_DATE":"2015-07-05","FREQ":3693},{"OCCUR_DATE":"2015-07-06","FREQ":5355},{"OCCUR_DATE":"2015-07-07","FREQ":4942},{"OCCUR_DATE":"2015-07-08","FREQ":4877},{"OCCUR_DATE":"2015-07-09","FREQ":4802},{"OCCUR_DATE":"2015-07-10","FREQ":2132},{"OCCUR_DATE":"2015-07-11","FREQ":879},{"OCCUR_DATE":"2015-07-12","FREQ":1783},{"OCCUR_DATE":"2015-07-13","FREQ":5787},{"OCCUR_DATE":"2015-07-14","FREQ":5355},{"OCCUR_DATE":"2015-07-15","FREQ":5208},{"OCCUR_DATE":"2015-07-16","FREQ":4969},{"OCCUR_DATE":"2015-07-17","FREQ":2260},{"OCCUR_DATE":"2015-07-18","FREQ":1668},{"OCCUR_DATE":"2015-07-19","FREQ":3116},{"OCCUR_DATE":"2015-07-20","FREQ":6058},{"OCCUR_DATE":"2015-07-21","FREQ":5144},{"OCCUR_DATE":"2015-07-22","FREQ":5906},{"OCCUR_DATE":"2015-07-23","FREQ":5953},{"OCCUR_DATE":"2015-07-24","FREQ":2807},{"OCCUR_DATE":"2015-07-25","FREQ":1703},{"OCCUR_DATE":"2015-07-26","FREQ":1996},{"OCCUR_DATE":"2015-07-27","FREQ":5646},{"OCCUR_DATE":"2015-07-28","FREQ":5283},{"OCCUR_DATE":"2015-07-29","FREQ":5955},{"OCCUR_DATE":"2015-07-30","FREQ":5867},{"OCCUR_DATE":"2015-07-31","FREQ":2774},{"OCCUR_DATE":"2015-08-01","FREQ":2192},{"OCCUR_DATE":"2015-08-02","FREQ":4069},{"OCCUR_DATE":"2015-08-03","FREQ":5712},{"OCCUR_DATE":"2015-08-04","FREQ":5774},{"OCCUR_DATE":"2015-08-05","FREQ":5058},{"OCCUR_DATE":"2015-08-06","FREQ":5746},{"OCCUR_DATE":"2015-08-07","FREQ":2884},{"OCCUR_DATE":"2015-08-08","FREQ":1494},{"OCCUR_DATE":"2015-08-09","FREQ":3931},{"OCCUR_DATE":"2015-08-10","FREQ":5834},{"OCCUR_DATE":"2015-08-11","FREQ":6811},{"OCCUR_DATE":"2015-08-12","FREQ":5076},{"OCCUR_DATE":"2015-08-13","FREQ":4542},{"OCCUR_DATE":"2015-08-14","FREQ":87},{"OCCUR_DATE":"2015-08-15","FREQ":1726},{"OCCUR_DATE":"2015-08-16","FREQ":1159},{"OCCUR_DATE":"2015-08-18","FREQ":3}];
AmCharts.ready(function() {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "OCCUR_DATE";
var graph = new AmCharts.AmGraph();
graph.valueField = "FREQ";
graph.type = "smoothedLine";
graph.theme = "light";
chart.addGraph(graph);
chart.write('chartdiv');
});
</script>
</head>
<body>
<div> GRAPH HERE </div>
<div id="chartdiv" style="width: 640px; height: 400px;"></div>
</body>
</html>
<小时>
更新的代码/工作解决方案
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jsapi.js"></script>
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<script type="text/javascript">
var db_query = <?php echo json_encode($db_query_1) ?>;
var chart;
var graph;
/* chart initialization */
var chart = AmCharts.makeChart("plot1", {
type: "serial",
categoryField: "OCCUR_DATE",
graphs: [{
type: "smoothedLine",
theme: "light",
valueField: "FREQ"
}]
})
$.ajax({
type: 'POST',
url: "mySQL.php",
data: {'db_que': db_query},
dataType: 'json',
context: document.body,
global: false,
async:true,
success: function(data) {
//alert(data);
chart.dataProvider = data;
chart.validateNow();
}
});
</script>
</head>
<body>
<div> GRAPH HERE </div>
<div id="plot1" style="width: 640px; height: 400px;"></div>
</body>
</html>
推荐答案
您可以先创建图表,然后在将异步请求的结果发送到您的数据库后分配值.
You can create the chart first and assign the values after getting the results from an asynchronous request to your DB.
试试这个:
/* chart initialization */
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
categoryField: "OCCUR_DATE",
graphs: [{
type: "smoothedLine",
theme: "light",
valueField: "FREQ"
}]
})
/* Asynchronous request */
var db_query = <?php echo json_encode($$db_query_1) ?>;
$.ajax({
type: 'POST',
url: "mySQL.php",
data: {'db_q': db_query},
dataType: 'json',
context: document.body,
global: false,
async: true,
success: function(data) {
chart.dataProvider = data;
chart.validateNow();
}
});
将请求数据类型更改为 JSON
,这样您就不必使用 eval()
Changed the request datatype to JSON
, so that you don't have to use eval()
这篇关于amcharts - 图形不显示值/使用 ajax 绘制 amcharrt/如何通过查询数据库绘制 amchart的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!