如何在Morris.js中使用本地的json数据？

Question

我正在尝试根据本地数据文件动态绘制莫里斯线 - 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'.

，结果将是相同的

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

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

Answer 1

将您的 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 }
  ]
}

改变你的莫里斯的data：

data: json.sales

最后，更改 ajax 的 url：

url: "sales.json"

如何在Morris.js中使用本地的json数据？

How to use the local json data in Morris.js?

javascript

ajax

jquery

json

morris.js