莫里斯图表从本地JSON文件中获取数据
[英]Morris chart to fetch data from a local JSON file
问题描述
我正在尝试创建一个莫里斯甜甜圈图 。 我已经对其进行了修改以从本地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} ]
2 个解决方案
解决方案1
5 2014-02-15 12:25:39
这是您需要了解并进行更改的内容，
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
1 2014-08-22 11:39:40
根据服务器端的数据转换，您可能会再次将其解析为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.js-带有json文件的折线图
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.