问题:

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

回答1:

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

回答2:

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 + "%" }
               });
           }
        );
    }