[英]Get MorrisChart Data dynamically via PHP function
我尝试使用从数据库获取数据的php函数动态构建MorrisChart的data参数。 在我的index.php中,我尝试调用该函数并通过AJAX加载数据。 我使用此答案中的代码将其实现为自己的代码。
这是我在页面index.php底部放在`标记before the
<script>
:
<script type="text/javascript">
var $dataForChart1;
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest(); //New request object
oReq.onload = function() {
//This is where you handle what to do with the response.
//The actual data is found on this.responseText
!function($) {
"use strict";
var MorrisCharts = function() {};
//creates line chart
MorrisCharts.prototype.createLineChart = function(element, data, xkey, ykeys, labels, lineColors) {
Morris.Line({
element: element,
data: data,
xkey: xkey,
ykeys: ykeys,
labels: labels,
hideHover: 'auto',
gridLineColor: '#eef0f2',
resize: true, //defaulted to true
lineColors: lineColors
});
},
MorrisCharts.prototype.init = function() {
//create line chart
var $data = this.responseText; //<-- Here we should get the data
this.createLineChart('morris-line-example', $data, 'y', ['a', 'b'], ['Series A', 'Series B'], ['#3292e0', '#dcdcdc']);
},
//init
$.MorrisCharts = new MorrisCharts, $.MorrisCharts.Constructor = MorrisCharts;
}(window.jQuery),
//initializing
function ($) {
"use strict";
$.MorrisCharts.init();
}(window.jQuery);
};
oReq.open("get", "get-data.php", true);
// ^ Don't block the rest of the execution.
// Don't wait until the request finishes to
// continue.
oReq.send();
</script>
文件get-data.php
包含以下代码:
<?php
/* Do some operation here, like talk to the database, the file-session
* The world beyond, limbo, the city of shimmers, and Canada.
*
* AJAX generally uses strings, but you can output JSON, HTML and XML as well.
* It all depends on the Content-type header that you send with your AJAX
* request. */
include("./assets/php/functions.php");
echo json_encode(getMorrisExampleData()); //In the end, you need to echo the result.
//All data should be json_encode()d.
//You can json_encode() any value in PHP, arrays, strings,
//even objects.
?>
这是函数getMorrisExampleData()
样子:
function getMorrisExampleData(){
$data = "[
{ y: '2009', a: 100, b: 90 },
{ y: '2010', a: 75, b: 65 },
{ y: '2011', a: 50, b: 40 },
{ y: '2012', a: 75, b: 65 },
{ y: '2013', a: 50, b: 40 },
{ y: '2014', a: 75, b: 65 },
{ y: '2015', a: 100, b: 90 }
]";
return $data;
}
当然,我在index.php
有一个id为morris-line-example
<div id="morris-line-example" style="height: 300px"></div>
: <div id="morris-line-example" style="height: 300px"></div>
我认为使用此设置应该可以正常工作,但不幸的是,它不能。 我对AJAX请求做错了吗?
第一个问题:将getMorrisExampleData()
替换为此:
function getMorrisExampleData(){
$data = array(
array("y" => 2009, "a" => 100, "b" => 90),
array("y" => 2010, "a" => 75, "b" => 65),
array("y" => 2011, "a" => 50, "b" => 40),
array("y" => 2012, "a" => 75, "b" => 65),
array("y" => 2013, "a" => 50, "b" => 40),
array("y" => 2014, "a" => 75, "b" => 65),
array("y" => 2015, "a" => 100, "b" => 90)
);
return $data;
}
为什么? 因为在您的代码中, $data
是一个不是有效JSON的字符串。 此外,在对它进行编码(使用json_encode
,会将其转换为Morris插件无法使用的JSON字符串(而不是包含对象的数组)。
(可能还有其他问题,请先尝试此操作)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.