Morris chart to fetch data from a local JSON file

2019-06-07 19:37发布

站内问答 / JavaScript
872 2 4

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.

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>

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

2条回答
小情绪 Triste *
2楼-- · 2019-06-07 20:08

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
        });
    });
}

jquery.getJSON

查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
3楼-- · 2019-06-07 20:15

Depends on your data conversion on server side you maybe parse it to json array again;

For example;

function drawChart() {
        $.getJSON('@Url.Action("GetJsonData", "Home")',
           function (data) {
               Morris.Donut({
                   element: 'donut-example',
                   data: JSON.parse(data),
                   formatter: function (x) { return x + "%" }
               });
           }
        );
    }
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)