在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
。
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 为effect Composer创建GodRays效果过程
- 从javascript创建一个列表
- onkeyup无法动态创建多个文本区域
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何访问声音管理器2创建的声音对象
- 多级HTML表单
- 我已经创建了一个jquery转盘,并使用if条件来运行和停止转盘
- 如何在Javascript中创建排序、拖放多级列表
- jQuery 创建多级无序列表
- 创建多级文档片段
- 动态创建用于jQuery-jTable的多级Javascript对象
- 如何创建多级可排序的投资组合
- 如何停止 e.prevent默认在创建响应式多级菜单时禁用子链接
- 如何从字符串创建多级列表菜单
- 如何为仪表板创建多级边栏
- 为多级JSON创建一个简单的元数据
- 在Amcharts中动态创建多级下钻
- 使用字符串数组创建多级对象,将数组解析为JS对象
- JavaScript创建多级对象