在Amcharts中动态创建多级下钻 - Dynamically create multi leveled drilldowns in Amcharts

我需要创建一个动态的多层，因为我必须深入到数百甚至数千个将从数据库加载的数据提供程序。流程是这样的:我有1年、2年、3年、4年和5年的时间，将分别深入到16个系，并将深入到10门或更多的课程。手动操作很繁琐，我需要它是动态的。请帮帮我。

变量:

var ccs_final_data = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/final_ccs_data");
//VAR CCS AVERAGE_FINAL
var drill_down_to_ccs_courses_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_courses_data_average_final");
var drill_down_to_ccs_sections_BSIT_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_sections_data_BSIT_average_final");
var drill_down_to_ccs_sections_ACT_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_sections_data_ACT_average_final");
var drill_down_to_ccs_sections_BSCS_average_final = AmCharts.loadJSON("<?php echo base_url();?>index.php/osa/ccs_sections_data_BSCS_average_final");

图:

    var chart2 = AmCharts.makeChart( "ccs2", {
  "theme": "light",
  type: "serial",
  pathToImages: "http://cdn.amcharts.com/lib/3/images/",
  dataProvider: ccs_final_data,
  categoryField: "category",
  categoryAxis: {
    labelRotation: 0,
    gridPosition: "start"
  },
  valueAxes: [ {
    title: "CCS FINAL TERM - Passing"
  } ],
  graphs: [ {
    valueField: "value",
    colorField: "color",
    type: "column",
    lineAlpha: 100,
    fillAlphas: 1
  } ],
  chartScrollbar: {
    "updateOnReleaseOnly": true
  },
  chartCursor: {
    bulletsEnabled: "enabled",
    bulletSize: 15,
    cursorAlpha: 100,
    cursorColor: "#CC0000",
    zoomable: true,
    categoryBalloonEnabled: true
  },
  export: {
    enabled: true
  }
} );

下面是向下钻取的内容:

chart2.addListener("clickGraphItem", function (event) {
if(event.item.category == "Average"){
    event.chart.dataProvider = drill_down_to_ccs_courses_average_final;
    event.chart.validateData();
      chart2.addListener("clickGraphItem", function (event) {
            if(event.item.category == "BSIT"){
                event.chart.dataProvider = drill_down_to_ccs_sections_BSIT_average_final;
                event.chart.validateData();
            }
            else if(event.item.category == "ACT"){
                event.chart.dataProvider = drill_down_to_ccs_sections_ACT_average_final;
                event.chart.validateData();
            }      
            else if(event.item.category == "BSCS"){
                event.chart.dataProvider = drill_down_to_ccs_sections_BSCS_average_final;
                event.chart.validateData();
            }
     });
}

我认为使其动态的最好方法是为数据中的每个数据点包含一些自定义字段，这些数据点将传递给服务器端脚本，以便它知道要加载哪些数据。

我假设你的数据现在是这样的:

[ {
  "category": "BSIT",
  "value": 100
}, {
  "category": "ACT",
  "value": 200
}, {
  "category": "BSCS",
  "value": 150
} ]

您可以很容易地添加第三个字段来保存下钻数据加载的信息:

[ {
  "category": "BSIT",
  "value": 100,
  "drill": "ccs_sections_data_BSIT_average_final"
}, {
  "category": "ACT",
  "value": 200,
  "drill": "ccs_sections_data_ACT_average_final"
}, {
  "category": "BSCS",
  "value": 150,
  "drill": "ccs_sections_data_BSCS_average_final"
} ]

然后，当clickGraphItem事件发生时，您可以获取该信息并将其动态传递给加载脚本:

chart2.addListener( "clickGraphItem", function( event ) {
  if ( event.item.dataContext.drill !== undefined ) {
    event.chart.dataProvider = AmCharts.loadJSON( "<?php echo base_url();?>index.php/osa/" + event.item.dataContext.drill );
    event.chart.validateData();
  }
} );

这样，你就可以有任意数量的下钻级别，每个级别的数据包含关于在哪里寻找下一个级别的数据的信息。

也，我不确定，因为你还没有发布它的代码，所以我假设AmCharts.loadJSON方法是同步的。如果它不是(例如，如果你使用数据加载器的方法)，你将需要在数据加载后分配图表的dataProvider。