gpt4 book ai didi

javascript - amcharts - 图表不显示值/使用 ajax 绘制 amcharrt/如何通过查询数据库绘制 amchart

转载 作者:行者123 更新时间:2023-11-30 12:16:43 25 4
gpt4 key购买 nike

这里是我的 HTML 和 javascript 代码,用于获取 amcharts 绘图

我调用数据库,通过在 PHP 中将其转换为 json 格式来检索结果,然后将其传递给图表以显示。

下面的 chartData 变量具有数据库查询返回的输出。当我将预期输出静态分配给 chartData 变量时,图形绘制。但是,当我分配 json 的 responseText 值重新调整的变量“sql_resp”时,图表显示“未定义”值。

我使用过诸如 firebug 之类的网络工具来 100% 确定 json 确实返回了结果。这是我第一次使用 amcharts。有人可以帮我理解我做错了什么吗。

<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>

最佳答案

您可以先创建图表,然后在从对数据库的异步请求获取结果后分配值。

试试这个:

/* 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()

关于javascript - amcharts - 图表不显示值/使用 ajax 绘制 amcharrt/如何通过查询数据库绘制 amchart,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32256442/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com