javascript 从本地 JSON 文件中获取数据的 Morris 图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21797450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Morris chart to fetch data from a local JSON file
提问by Govind Kailas
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.
我正在尝试创建一个莫里斯甜甜圈图。我已经修改它以从本地 json 文件中获取数据，但由于某种原因它没有加载图表。控制台中也没有错误。
Here is the html file
这是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>
And here is my data.json file
这是我的 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} ]
回答by Dipak Ingole
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
jquery.getJSON
回答by Cracker
Depends on your data conversion on server side you maybe parse it to json array again;
取决于您在服务器端的数据转换，您可能会再次将其解析为 json 数组；
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 + "%" }
});
}
);
}
