访问复杂的json数据

时间:2013-12-10 18:01:27

标签: javascript json coldfusion

网络API调用的<cfoutput>#cfhttp.FileContent#</cfoutput>产生以下输出:

[
    {
        "date": "2013-12-08",
        "open": {
            "Webmail": 6717,
            "Phone": 8086,
            "Other": 1224,
            "Tablet": 2374,
            "Desktop": 1967
        }
    },
    {
        "date": "2013-12-09",
        "open": {
            "Webmail": 15213,
            "Phone": 18445,
            "Other": 2968,
            "Tablet": 3944,
            "Desktop": 5014
        }
    },
    {
        "date": "2013-12-10",
        "open": {
            "Webmail": 432,
            "Phone": 403,
            "Other": 39,
            "Tablet": 115,
            "Desktop": 106
        }
    }
]

我想知道,是否可以访问Webmail,手机,平板电脑等,以便绘制下面jsfiddle中提到的amchart:

http://jsfiddle.net/amcharts/TQxYB/

1 个答案:

答案 0 :(得分:2)

我们可以在json中访问其子节点。 你只需要运行循环。 我试过一个演示希望你能得到一些帮助。

http://jsfiddle.net/qthpt/

var chart;
var legend;

var json = [
        {
            "date": "2013-12-08",
            "open": {
                "Webmail": 6717,
                "Phone": 8086,
                "Other": 1224,
                "Tablet": 2374,
                "Desktop": 1967
            }
        },
        {
            "date": "2013-12-09",
            "open": {
                "Webmail": 15213,
                "Phone": 18445,
                "Other": 2968,
                "Tablet": 3944,
                "Desktop": 5014
            }
        },
        {
            "date": "2013-12-10",
            "open": {
                "Webmail": 432,
                "Phone": 403,
                "Other": 39,
                "Tablet": 115,
                "Desktop": 106
            }
        }
    ];
 var chartData = [];
        for (var i = 0; i < json.length; i++) {
            chartData.push({
                "date":json[i].date,
                "webmail":json[i].open.Webmail
            });
        }



AmCharts.ready(function () {
    // PIE CHART
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = chartData;
    chart.titleField = "date";
    chart.valueField = "webmail";
    chart.outlineColor = "#FFFFFF";
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 2;
    chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";

    // WRITE
    chart.write("chartdiv");
});