gpt4 book ai didi

javascript - Morris.js中如何使用本地的json数据?

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:29:40 27 4
gpt4 key购买 nike

我正在尝试根据本地数据文件 - sales.php(json 格式)动态绘制莫里斯线:

[
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
]

您可以在下面看到我的 HTML 代码。但是页面上没有图表,我只看到空白的图表。此外,java 控制台中没有错误(除了关于异步的警告)。如果我将脚本位置更改为“head”或“body”,结果将是相同的。

这个问题可能是由 sales.php 中的 ajax 查询语法或(可能)数据结构引起的吗?

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>
<body>
<div id="line-example"></div>
</body>
<script>
$.ajax({
type: 'POST',
url: "sales.php",
dataType: "json",
async: false,
contentType: "application/json; charset=utf-8",
success: function (json) {
Morris.Line({
element: 'line-example',
data: $.parseJSON(json),
xkey: 'year',
ykeys: ['value'],
labels: ['Value']
});
}
});
</script>
</html>

最佳答案

将您的 sales.php 重命名为 sales.json。如果您使用 php 扩展名命名您的文件,您的服务器将尝试解释您的文件,但您的文件中没有 php 标记。

然后编写一个合适的 json 对象:

{
"sales": [
{ "year": "2008", "value": 20 },
{ "year": "2009", "value": 10 },
{ "year": "2010", "value": 5 },
{ "year": "2011", "value": 5 },
{ "year": "2012", "value": 20 }
]
}

更改 Morris 的 data:

data: json.sales

最后,更改您的 ajax 的 url:

url: "sales.json"

关于javascript - Morris.js中如何使用本地的json数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34062926/

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