javascript — динамически создавать многоуровневые развертки в 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();
}
});
}

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 после загрузки данных.

1

Другие решения

Других решений пока нет …