amCharts Многоуровневое разворачивание

Question

Я пытаюсь создать отчет, который визуально отображает собранные данные, чтобы отображать скорость ответа электронной почты, отправленную из колледжа студентам.

На самом верхнем уровне круговая диаграмма показывает, сколько ответы были собраны, На втором уровне, она показывает, что ответы, собранные были, которые могут быть либо в

• Принять интервью приглашение
• Запрос дата/время
• Отклонить интервью

Если интервью наклонено альтернатива, мы фиксируем, что привело к Штуде nt, чтобы сделать этот выбор.

Я следил за несколькими руководствами здесь и на веб-сайте 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; 
}