Question

我试图可视化从REST api中的JSON文件中检索到的数据。我使用Morris js创建一个简单的条形图。我很难搞清楚如何正确格式化javascript数组。

图表的生成如下：

Morris.Bar({
    element: 'myfirstchart',
    data: [
        { year: '2008', value: 20 },
        { year: '2009', value: 10 },
        { year: '2010', value: 5 },
        { year: '2011', value: 5 },
        { year: '2012', value: 20 }
    ],
    xkey: 'year',
    ykeys: ['value'],
    labels: ['Series A']
});

我一直在尝试在变量中保存JSON结构中的值：

var USD = data.d.results[0].ExchangeCross;
var USD2 = data.d.results[0].ApprovedRate;

为了将它们添加到图表中，我尝试将它们添加到这样的数组中：

var obj = { year: USD, value: USD2 };

然后将data:[]更改为data:obj。这不起作用。最佳解决方案是为我需要的所有值运行each函数，然后将它们绘制到图表中。

修改forEach function：

$( document ).ready(function() {
    $.ajax({
        url: "http://intra.site.com/_vti_bin/ListData.svc/ExchangeRates?$orderby=Modified%20desc",
        headers: { 'accept': 'application/json;odata=verbose', 'content-type': 'application/json;odata=verbose'},
        success: function(data){ 
                    var params = {
                        element: 'myfirstchart',
                        data: [],
                        xkey: 'year',
                        ykeys: ['value'],
                        labels: ['Series A']
                                    };

                        var data = JSON.parse(data);

                        data.d.results.forEach(function(element) {
                        var obj = { "year": element.ExchangeCross, "value": element.ApprovedRate }; 
                        params.data.push(obj);
                    });

                    Morris.Bar(params);

                                }  
            });
     });

Answer 1

您必须将从API接收的数据作为API加载到您的Morris图表中。你通过循环你的JSON，创建一个对象并将它们推入一个数组来做到这一点。

假设这是您收到的JSON：

var jsonString = '{"d": {"results": [{"ExchangeCross": "2010", "ApprovedRate": "20"}, {"ExchangeCross": "2011", "ApprovedRate": "5"}, {"ExchangeCross": "2012", "ApprovedRate": "15"}, {"ExchangeCross": "2013", "ApprovedRate": "35"}, {"ExchangeCross": "2014", "ApprovedRate": "10"}]}}';

创建一个params对象以与Morris图表一起使用，data为空数组：

var params = {
    element: 'myfirstchart',
    data: [],
    xkey: 'year',
    ykeys: ['value'],
    labels: ['Series A']
};

解析你的JSON（如果你有一个字符串）：

var data = JSON.parse(jsonString);

遍历results包含在d内的params.data数组，创建一个包含所需值的兼容对象，并将该对象推送到data.d.results.forEach(function(element) { var obj = { "year": element.ExchangeCross, "value": element.ApprovedRate }; params.data.push(obj); });数组中：

Morris.Bar

使用params：

呼叫您的

Morris.Bar(params);

{{1}}

Answer 2

如果我了解你，你是否正在尝试替换你传递给Morris Bar函数的JS对象的data部分？

您需要创建一个数组而不是对象。

尝试这样的事情：

var USD = data.d.results[0].ExchangeCross;
var USD2 = data.d.results[0].ApprovedRate;

var dataArray = [];

// push each item into the array
dataArray.push( {year: USD, value: USD2} );

Morris.Bar({
    element: 'myfirstchart',
    data: dataArray,
    xkey: 'year',
    ykeys: ['value'],
    labels: ['Series A']
});

将值从JSON移动到javascript数组

2 个答案: