javascript - amCharts 多级深入分析

Question

我正在尝试生成一份报告，直观地显示收集到的数据，以代表大学向学生发送的电子邮件事件的响应率。

最顶层的饼图显示了已收集的回复数量，在第二级，它显示收集到的响应是什么，可以是

• 接受面试邀请
• 请求替代日期/时间
• 拒绝采访

如果面试被拒绝，我们会了解导致学生做出此选择的原因。

我遵循了此处和 amCharts 网站上的一些指南，了解如何向下钻取单个层，并且效果成功，如下面的 fiddle 所示。

我正在努力解决的是如何添加所需的额外钻取级别。

amCharts 网站指出您可以深入多个级别，但我正在努力实现这一点

http://jsfiddle.net/6cLx34bL/

    var piedata = [{"response": "Not Yet Responded",
                "count": 151 
                  }, {
                "response": "Responded",
                "count": 259,
                "subdata": [
                    {"response": "Interview Re-Arranged", "count":28},
                    {"response": "Confirmed Attending", "count":213},
                    {"response": "Withdrawn Prior To Interview", "count":18, "subdata":[
                        {"response": "Course(s) Not Suitable", "count":1},
                        {"response": "Financial Issues", "count":1},
                        {"response": "Other College - Not Listed", "count":1},
                        {"response": "Other College - Local", "count":3},
                        {"response": "Transport Issues", "count":1},
                        {"response": "Unknown", "count":11}]} 
                ]}];

function generateChartDataPie () {
    var chartDataPie = [];
    for (var i = 0; i < piedata.length; i++) {
        if (i== selected) {
            for (var x = 0; x < piedata[i].subdata.length; x++) {
                chartDataPie.push({
                    response: piedata[i].subdata[x].response,
                    count: piedata[i].subdata[x].count,
                    pulled: true
                });
            }
        }
        else {
            chartDataPie.push({
                response: piedata[i].response,
                count: piedata[i].count,
                id: i
            });
        }
    }
    return chartDataPie;
}
var selected;

AmCharts.ready(function() {
    // PIE CHART
    chart = new AmCharts.AmPieChart(AmCharts.themes.light);
    chart.dataProvider = generateChartDataPie();
    chart.titleField = "response";
    chart.valueField = "count";
    chart.outlineColor = "#FFFFFF";
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 2;
    chart.pulledField = "pulled";
    chart.labelsEnabled = false;

    // ADD TITLE
    chart.addTitle("Click a slice to see the details");

    // AN EVENT TO HANDLE SLICE CLICKS
    chart.addListener("clickSlice", function (event) {
        if (event.dataItem.dataContext.id != undefined) {
            selected = event.dataItem.dataContext.id;
        }
        else {
            selected = undefined;
        }
        chart.dataProvider = generateChartDataPie();
        chart.validateData();
    });

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

Answer 1

更改函数已完成多级深入，更新函数如下:

function generateChartDataPie () {
    var chartDataPie = [];

        if (selected) {
            for (var x = 0; x < selected.length; x++) {
                chartDataPie.push({
                    response: selected[x].response,
                    count: selected[x].count,
                    pulled: true,
                    subdata: selected[x].subdata
                });
            }
        }
        else {
            chartDataPie = piedata;
        }
    return chartDataPie;
}