Question

我正在尝试创建一个morris donut chart。我已经修改它以从本地json文件获取数据，但由于某种原因它没有加载图表。控制台中也没有错误。

这是html文件

<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文件

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

Answer 1

以下是您需要了解和进行更改的内容，

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

Answer 2

取决于您在服务器端的数据转换，您可能会再次将其解析为json数组;

例如;

function drawChart() {
        $.getJSON('@Url.Action("GetJsonData", "Home")',
           function (data) {
               Morris.Donut({
                   element: 'donut-example',
                   data: JSON.parse(data),
                   formatter: function (x) { return x + "%" }
               });
           }
        );
    }

Morris图表从本地JSON文件中获取数据

2 个答案:

jquery.getJSON