javascript - 访问复杂的 json 数据

Question

<cfoutput>#cfhttp.FileContent#</cfoutput> Web API 调用会产生以下输出:

[
    {
        "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
        }
    }
]

我想知道，是否可以访问网络邮件、电话、平板电脑等来绘制 amchart，如下面的 jsfiddle 中所述:

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

Answer 1

是的，我们可以通过 json 访问它的子项。你只需要运行 for 循环。我尝试了一个演示，希望你能得到一些帮助。

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");
});