莫里斯图表从本地JSON文件中获取数据 [英] Morris chart to fetch data from a local JSON file

查看:139
本文介绍了莫里斯图表从本地JSON文件中获取数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试创建一个莫里斯甜甜圈图. 我已经对其进行了修改以从本地json文件获取数据,但由于某种原因它无法加载图表.控制台中也没有错误.

I am trying to create a morris donut chart. I have modified it to get data from a local json file, but for some reason it doesnt load the chart.No error in the console also.

这是html文件

Here is the html file

<meta charset=utf-8 />
<title>Morris.js Donut Chart Example</title>
</head>
<body onLoad="drawChart()">
<div id="donut-example"></div>
</body>

<script>
      function drawChart() {
      var jsonData = $.getJSON("data.json", function(json) {
    console.log(json); // show the info in console
});
        Morris.Donut({
              element: 'donut-example',
              data: jsonData
            });
      }
</script>
</html>

这是我的data.json文件

And here is my data.json file

  [ {label: "Download Sales", value: 12},     {label: "In-Store Sales", value: 30},     {label: "In-Store Sales", value: 25},     {label: "Mail-Order Sales", value: 20} ]

推荐答案

这是您需要了解和进行更改的地方,

Here is what you need to understand and do changes,

function drawChart() {
    $.getJSON("data.json", function (json) { // callback function which gets called when your request completes. 
        Morris.Donut({
            element: 'donut-example',
            data: json // use returned data to plot the graph
        });
    });
}

这篇关于莫里斯图表从本地JSON文件中获取数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆