amCharts 多级深入分析

Question

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

在最顶层，饼图显示已收集到多少响应， 在第二层，它显示收集到的响应是什么，可以是

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

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

我已经按照这里和 amCharts 网站上的一些指南来了解如何向下钻取单个层，这可以在下面的小提琴中看到成功。

我正在苦苦挣扎的是如何添加所需的额外向下钻取级别。

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