Javascript Morris chart从本地JSON文件获取数据_Javascript_Jquery_Html_Json_Morris.js

Javascript Morris chart从本地JSON文件获取数据

javascript jquery html json

Javascript Morris chart从本地JSON文件获取数据,javascript,jquery,html,json,morris.js,Javascript,Jquery,Html,Json,Morris.js,我想创造一个莫里斯。我对它进行了修改，以从本地json文件获取数据，但由于某些原因，它没有加载图表。控制台中也没有错误 <meta charset=utf-8 /> <title>Morris.js Donut Chart Example</title> </head> <body onLoad="drawChart()"> <div id="donut-example"></div> </body>

我想创造一个莫里斯。我对它进行了修改，以从本地json文件获取数据，但由于某些原因，它没有加载图表。控制台中也没有错误

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

这是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>

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

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

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

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

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

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数组

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

比如,

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

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

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

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

比如,

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

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

谢谢你的帮助，我对UI设计完全陌生。但是没有数据加载到div

甜甜圈示例中。它仍然显示一个空白页。你能准备一把小提琴吗？@GovindKailas..我假设你的ajax调用工作成功，并返回一个你在问题中发布的数据..是的，当我硬编码数据时，它会完美地出现。但从json数据文件加载会导致一个空白page@GovindKailas这意味着您的ajax调用有一些问题。您能确保您的ajax调用返回数据吗？。使用控制台日志打印数据感谢您的帮助，我对UI设计一无所知。但是没有数据加载到div甜甜圈示例中。它仍然显示一个空白页。你能准备一把小提琴吗？@GovindKailas..我假设你的ajax调用工作成功，并返回一个你在问题中发布的数据..是的，当我硬编码数据时，它会完美地出现。但从json数据文件加载会导致一个空白page@GovindKailas这意味着您的ajax调用有一些问题。能否确保您的ajax调用正在返回数据？请使用控制台日志打印数据