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

标签 javascript jquery html json morris.js

我正在尝试创建莫里斯 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} ]

最佳答案

这是您需要了解并进行更改的内容,

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

关于javascript - 从本地 JSON 文件中获取数据的 Morris 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21797450/

相关文章:

javascript - 触发 jquery 函数

javascript - 隐藏和显示 2 个轮播时 jquery.flipster 不显示

javascript - 组件未在重定向时呈现

javascript - 使用 Javascript 更改 iframe 内文本的颜色

javascript - 多个嵌套对象的 eval() 替代方法

javascript - 如何让我的 'Add Item' 按钮在我的 JSP 上工作,以便它可以将数据提交到我的数据库中

javascript - 如何强制下载未使用的 CSS 图像?

jquery - 文本区域高度增加

jquery - 如何在弹出屏幕显示时禁用 ListView 的滚动

Bootstrap 中的 Javascript 元素不起作用