在 Amcharts 中动态创建多层次的钻取

Question

我需要创建一个动态的多层次，因为我必须深入研究数百甚至数千个将从数据库加载的数据提供者。流程是这样的：我有 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();
            }
     });
}

Answer 1

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

我假设您的数据现在看起来像这样：

[ {
  "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 方法是同步的。如果不是（例如，如果您使用 Data Loader 中的方法），则需要在加载数据后分配图表的 dataProvider。