简介
在这篇博客中，我想展示如何通过点击复选框组，使网格上可能包含图表或文本的单元格出现/消失。这个解决方案的特点是，根据复选框组上所选项目的数量，相关的单元格会被显示出来并与页面中心对齐。
概述
这篇博文包括以下步骤。
- 创建复选框组。
- 创建有1行11列的grid_layout_1。
- 创建1行10列的grid_layout_9。
- 在复选框组的 "on select "事件中编写JS代码
创建复选框组。
放置复选框组，用值和文本填充它。
创建grid_layout_1，有1行和11列。
从第二个单元格(0,1)开始，放置带有水果文本的面板。单元格（0,0）和（0,10）留空。
创建有1行10列的grid_layout_9。
在grid_layout_9中，从第二个单元格（0,1）开始创建空的面板。单元格（0,0）和（0,9）留空。
让grid_layout_9不可见。
两个grid_layout我们需要在两种情况下使用：如果复选框组上有奇数的选中项目，那么grid_layout_1是可见的，grid_layout_9是不可见的。如果是偶数，那么grid_layout_9是可见的，grid_layout_1是不可见的。这个解决方案可以帮助我们在页面中心布置文本的面板。
| 数目 | 偶数 | ||||||||
| 1 | PANEL_8 | ||||||||
| 3 | PANEL_7 | PANEL_8 | PANEL_9 | ||||||
| 5 | PANEL_5 | PANEL_7 | PANEL_8 | PANEL_9 | PANEL_10 | ||||
| 7 | PANEL_4 | PANEL_5 | PANEL_7 | PANEL_8 | PANEL_9 | PANEL_10 | PANEL_11 | ||
| 9 | PANEL_6 | PANEL_4 | PANEL_5 | PANEL_7 | PANEL_8 | PANEL_9 | PANEL_10 | PANEL_11 | PANEL_12 |
| 编号 | 偶数 | ||||||||
| 2 | PANEL_7_1 | PANEL_8_1 | |||||||
| 4 | PANEL_5_1 | PANEL_7_1 | PANEL_8_1 | PANEL_9_1 | |||||
| 6 | PANEL_4_1 | PANEL_5_1 | PANEL_7_1 | PANEL_8_1 | PANEL_9_1 | PANEL_10_1 | |||
| 8 | PANEL_6_1 | PANEL_4_1 | PANEL_5_1 | PANEL_7_1 | PANEL_8_1 | PANEL_9_1 | PANEL_10_1 | PANEL_11_1 |
把JS代码放在复选框组的 "On Select "事件中。
首先，使所有创建的面板和文本不可见。
所以，如果用户在复选框组上选择了奇数的项目，那么grid_layout_1就被设置为可见。
当复选框组的项目被选中时，项目的值被写入数组arr中。在选择之后，事件被触发，数组arr被从索引0处读取。
在下面的表格中，你可以看到数组索引和网格上的面板单元的相关性。
| GRIDLAYOUT_1 | 奇数 | PANEL_6 | PANEL_4 | PANEL_5 | PANEL_7 | PANEL_8 | PANEL_9 | PANEL_10 | PANEL_11 | PANEL_12 |
| 阵列索引 | 7 | 5 | 3 | 1 | 0 | 2 | 4 | 6 | 8 | |
| 栅栏式布局_9 | 偶数 | PANEL_6_1 | PANEL_4_1 | PANEL_5_1 | PANEL_7_1 | PANEL_8_1 | PANEL_9_1 | PANEL_10_1 | PANEL_11_1 | |
| 阵列索引 | 7 | 4 | 2 | 0 | 1 | 3 | 5 | 6 |
根据索引（0），相关的（panel_8）被设置为可见，取决于哪个元素被写在索引0，相关的文本被移到该面板。对于元素1（苹果），带有文本 "苹果 "的text_6被移到panel_8。
对于索引(1)，相关的(panel_7)被设置为可见，根据哪个元素被写在1的索引，相关的文本被移动到该面板。对于元素1（苹果），文本_6的文字 "苹果 "被移到panel_7。
否则，如果用户在复选框上选择了偶数个项目，那么grid_layout_9就被设置为可见。
根据索引（0），相关的（panel_7_1）被设置为可见，取决于哪个元素被写在索引0，相关的文本被移到该面板。对于元素1（苹果），文本 "Apple "的text_6被移到panel_7_1。
对于索引（1），相关的（panel_8_1）被设置为可见，取决于哪个元素被写在索引1，相关的文本被移到该面板。对于元素1(apple)，带有文本 "Apple "的text_6被移到panel_8_1。
下面的附录中我们可以找到完整的JS和CSS代码。
总结
最后，你可以看到如何通过点击复选框组来创建动态出现/消失的单元格面板的复杂可视化。通过使用这个解决方案，你可以创建有吸引力和现代的应用程序。希望它对你有用。
请在评论中分享你的意见，并订阅和关注我的账户以获得类似的内容。
在博客文章中寻找更多关于SAP Lumira解决方案的信息。 SAP Lumira | SAP博客
搜索问题和答案 :SAP Lumira | 问题和答案
探索其他关于SAP Lumira的帖子：SAP Lumira | 其他信息
附录
PANEL_6.setVisible(false);
PANEL_4.setVisible(false);
PANEL_5.setVisible(false);
PANEL_7.setVisible(false);
PANEL_8.setVisible(false);
PANEL_9.setVisible(false);
PANEL_10.setVisible(false);
PANEL_11.setVisible(false);
PANEL_12.setVisible(false);
PANEL_6_1.setVisible(false);
PANEL_4_1.setVisible(false);
PANEL_5_1.setVisible(false);
PANEL_7_1.setVisible(false);
PANEL_8_1.setVisible(false);
PANEL_9_1.setVisible(false);
PANEL_10_1.setVisible(false);
PANEL_11_1.setVisible(false);
TEXT_6.setVisible(false);
TEXT_7.setVisible(false);
TEXT_8.setVisible(false);
TEXT_9.setVisible(false);
TEXT_11.setVisible(false);
TEXT_14.setVisible(false);
TEXT_15.setVisible(false);
TEXT_16.setVisible(false);
TEXT_17.setVisible(false);
arr =this.getSelectedValues();
var arrlen=arr.length;// read the array lenth
arr.forEach(function(element, index) { //Array begin
if (arrlen ==1 || arrlen ==3 || arrlen ==5 || arrlen ==7 || arrlen ==9 ){// if the array lenth is odd
GRID_LAYOUT_1.setVisible(true);
GRID_LAYOUT_9.setVisible(false);
if (index == 0){// 0 array value
if ( element =="1"){
PANEL_8.moveComponent(TEXT_6);
PANEL_8.setVisible(true);
TEXT_6.setVisible(true);
PANEL_8.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_8.moveComponent(TEXT_7);
PANEL_8.setVisible(true);
TEXT_7.setVisible(true);
PANEL_8.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_8.moveComponent(TEXT_8);
PANEL_8.setVisible(true);
TEXT_8.setVisible(true);
PANEL_8.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_8.moveComponent(TEXT_9);
PANEL_8.setVisible(true);
TEXT_9.setVisible(true);
PANEL_8.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_8.moveComponent(TEXT_11);
PANEL_8.setVisible(true);
TEXT_11.setVisible(true);
PANEL_8.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_8.moveComponent(TEXT_14);
PANEL_8.setVisible(true);
TEXT_14.setVisible(true);
PANEL_8.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_8.moveComponent(TEXT_15);
PANEL_8.setVisible(true);
TEXT_15.setVisible(true);
PANEL_8.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_8.moveComponent(TEXT_16);
PANEL_8.setVisible(true);
TEXT_16.setVisible(true);
PANEL_8.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_8.moveComponent(TEXT_17);
PANEL_8.setVisible(true);
TEXT_17.setVisible(true);
PANEL_8.setCSSClass("CHART_9");
}
} //0 the end of array
else if (index == 1){// 1 array value
if ( element =="1"){
PANEL_7.moveComponent(TEXT_6);
PANEL_7.setVisible(true);
TEXT_6.setVisible(true);
PANEL_7.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_7.moveComponent(TEXT_7);
PANEL_7.setVisible(true);
TEXT_7.setVisible(true);
PANEL_7.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_7.moveComponent(TEXT_8);
PANEL_7.setVisible(true);
TEXT_8.setVisible(true);
PANEL_7.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_7.moveComponent(TEXT_9);
PANEL_7.setVisible(true);
TEXT_9.setVisible(true);
PANEL_7.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_7.moveComponent(TEXT_11);
PANEL_7.setVisible(true);
TEXT_11.setVisible(true);
PANEL_7.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_7.moveComponent(TEXT_14);
PANEL_7.setVisible(true);
TEXT_14.setVisible(true);
PANEL_7.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_7.moveComponent(TEXT_15);
PANEL_7.setVisible(true);
TEXT_15.setVisible(true);
PANEL_7.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_7.moveComponent(TEXT_16);
PANEL_7.setVisible(true);
TEXT_16.setVisible(true);
PANEL_7.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_7.moveComponent(TEXT_17);
PANEL_7.setVisible(true);
TEXT_17.setVisible(true);
PANEL_7.setCSSClass("CHART_9");
}
} //1 end of the array
else if (index == 2){// 2 array value
if ( element =="1"){
PANEL_9.moveComponent(TEXT_6);
PANEL_9.setVisible(true);
TEXT_6.setVisible(true);
PANEL_9.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_9.moveComponent(TEXT_7);
PANEL_9.setVisible(true);
TEXT_7.setVisible(true);
PANEL_9.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_9.moveComponent(TEXT_8);
PANEL_9.setVisible(true);
TEXT_8.setVisible(true);
PANEL_9.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_9.moveComponent(TEXT_9);
PANEL_9.setVisible(true);
TEXT_9.setVisible(true);
PANEL_9.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_9.moveComponent(TEXT_11);
PANEL_9.setVisible(true);
TEXT_11.setVisible(true);
PANEL_9.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_9.moveComponent(TEXT_14);
PANEL_9.setVisible(true);
TEXT_14.setVisible(true);
PANEL_9.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_9.moveComponent(TEXT_15);
PANEL_9.setVisible(true);
TEXT_15.setVisible(true);
PANEL_9.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_9.moveComponent(TEXT_16);
PANEL_9.setVisible(true);
TEXT_16.setVisible(true);
PANEL_9.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_9.moveComponent(TEXT_17);
PANEL_9.setVisible(true);
TEXT_17.setVisible(true);
PANEL_9.setCSSClass("CHART_9");
}
} //2 end of the array
else if (index == 3){// 3 array value
if ( element =="1"){
PANEL_5.moveComponent(TEXT_6);
PANEL_5.setVisible(true);
TEXT_6.setVisible(true);
PANEL_5.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_5.moveComponent(TEXT_7);
PANEL_5.setVisible(true);
TEXT_7.setVisible(true);
PANEL_5.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_5.moveComponent(TEXT_8);
PANEL_5.setVisible(true);
TEXT_8.setVisible(true);
PANEL_5.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_5.moveComponent(TEXT_9);
PANEL_5.setVisible(true);
TEXT_9.setVisible(true);
PANEL_5.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_5.moveComponent(TEXT_11);
PANEL_5.setVisible(true);
TEXT_11.setVisible(true);
PANEL_5.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_5.moveComponent(TEXT_14);
PANEL_5.setVisible(true);
TEXT_14.setVisible(true);
PANEL_5.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_5.moveComponent(TEXT_15);
PANEL_5.setVisible(true);
TEXT_15.setVisible(true);
PANEL_5.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_5.moveComponent(TEXT_16);
PANEL_5.setVisible(true);
TEXT_16.setVisible(true);
PANEL_5.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_5.moveComponent(TEXT_17);
PANEL_5.setVisible(true);
TEXT_17.setVisible(true);
PANEL_5.setCSSClass("CHART_9");
}
} //3 end of the array
else if (index == 4){// 4 array value
if ( element =="1"){
PANEL_10.moveComponent(TEXT_6);
PANEL_10.setVisible(true);
TEXT_6.setVisible(true);
PANEL_10.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_10.moveComponent(TEXT_7);
PANEL_10.setVisible(true);
TEXT_7.setVisible(true);
PANEL_10.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_10.moveComponent(TEXT_8);
PANEL_10.setVisible(true);
TEXT_8.setVisible(true);
PANEL_10.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_10.moveComponent(TEXT_9);
PANEL_10.setVisible(true);
TEXT_9.setVisible(true);
PANEL_10.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_10.moveComponent(TEXT_11);
PANEL_10.setVisible(true);
TEXT_11.setVisible(true);
PANEL_10.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_10.moveComponent(TEXT_14);
PANEL_10.setVisible(true);
TEXT_14.setVisible(true);
PANEL_10.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_10.moveComponent(TEXT_15);
PANEL_10.setVisible(true);
TEXT_15.setVisible(true);
PANEL_10.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_10.moveComponent(TEXT_16);
PANEL_10.setVisible(true);
TEXT_16.setVisible(true);
PANEL_10.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_10.moveComponent(TEXT_17);
PANEL_10.setVisible(true);
TEXT_17.setVisible(true);
PANEL_10.setCSSClass("CHART_9");
}
} //4 end of the array
else if (index == 5){// 5 array value
if ( element =="1"){
PANEL_4.moveComponent(TEXT_6);
PANEL_4.setVisible(true);
TEXT_6.setVisible(true);
PANEL_4.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_4.moveComponent(TEXT_7);
PANEL_4.setVisible(true);
TEXT_7.setVisible(true);
PANEL_4.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_4.moveComponent(TEXT_8);
PANEL_4.setVisible(true);
TEXT_8.setVisible(true);
PANEL_4.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_4.moveComponent(TEXT_9);
PANEL_4.setVisible(true);
TEXT_9.setVisible(true);
PANEL_4.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_4.moveComponent(TEXT_11);
PANEL_4.setVisible(true);
TEXT_11.setVisible(true);
PANEL_4.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_4.moveComponent(TEXT_14);
PANEL_4.setVisible(true);
TEXT_14.setVisible(true);
PANEL_4.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_4.moveComponent(TEXT_15);
PANEL_4.setVisible(true);
TEXT_15.setVisible(true);
PANEL_4.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_4.moveComponent(TEXT_16);
PANEL_4.setVisible(true);
TEXT_16.setVisible(true);
PANEL_4.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_4.moveComponent(TEXT_17);
PANEL_4.setVisible(true);
TEXT_17.setVisible(true);
PANEL_4.setCSSClass("CHART_9");
}
} //5 end of the array
else if (index == 6){// 6 array value
if ( element =="1"){
PANEL_11.moveComponent(TEXT_6);
PANEL_11.setVisible(true);
TEXT_6.setVisible(true);
PANEL_11.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_11.moveComponent(TEXT_7);
PANEL_11.setVisible(true);
TEXT_7.setVisible(true);
PANEL_11.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_11.moveComponent(TEXT_8);
PANEL_11.setVisible(true);
TEXT_8.setVisible(true);
PANEL_11.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_11.moveComponent(TEXT_9);
PANEL_11.setVisible(true);
TEXT_9.setVisible(true);
PANEL_11.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_11.moveComponent(TEXT_11);
PANEL_11.setVisible(true);
TEXT_11.setVisible(true);
PANEL_11.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_11.moveComponent(TEXT_14);
PANEL_11.setVisible(true);
TEXT_14.setVisible(true);
PANEL_11.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_11.moveComponent(TEXT_15);
PANEL_11.setVisible(true);
PANEL_11.setCSSClass("CHART_7");
TEXT_15.setVisible(true);
}
else if (element=="8")
{ PANEL_11.moveComponent(TEXT_16);
PANEL_11.setVisible(true);
TEXT_16.setVisible(true);
PANEL_11.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_11.moveComponent(TEXT_17);
PANEL_11.setVisible(true);
TEXT_17.setVisible(true);
PANEL_11.setCSSClass("CHART_9");
}
} //6 end of the array
else if (index == 7){// 7 array value
if ( element =="1"){
PANEL_6.moveComponent(TEXT_6);
PANEL_6.setVisible(true);
TEXT_6.setVisible(true);
PANEL_6.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_6.moveComponent(TEXT_7);
PANEL_6.setVisible(true);
TEXT_7.setVisible(true);
PANEL_6.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_6.moveComponent(TEXT_8);
PANEL_6.setVisible(true);
TEXT_8.setVisible(true);
PANEL_6.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_6.moveComponent(TEXT_9);
PANEL_6.setVisible(true);
TEXT_9.setVisible(true);
PANEL_6.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_6.moveComponent(TEXT_11);
PANEL_6.setVisible(true);
TEXT_11.setVisible(true);
PANEL_6.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_6.moveComponent(TEXT_14);
PANEL_6.setVisible(true);
TEXT_14.setVisible(true);
PANEL_6.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_6.moveComponent(TEXT_15);
PANEL_6.setVisible(true);
TEXT_15.setVisible(true);
PANEL_6.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_6.moveComponent(TEXT_16);
PANEL_6.setVisible(true);
TEXT_16.setVisible(true);
PANEL_6.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_6.moveComponent(TEXT_17);
PANEL_6.setVisible(true);
TEXT_17.setVisible(true);
PANEL_6.setCSSClass("CHART_9");
}
} //7 end of the array
else if (index == 8){// 8 array value
if ( element =="1"){
PANEL_12.moveComponent(TEXT_6);
PANEL_12.setVisible(true);
TEXT_6.setVisible(true);
PANEL_12.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_12.moveComponent(TEXT_7);
PANEL_12.setVisible(true);
TEXT_7.setVisible(true);
PANEL_12.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_12.moveComponent(TEXT_8);
PANEL_12.setVisible(true);
TEXT_8.setVisible(true);
PANEL_12.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_12.moveComponent(TEXT_9);
PANEL_12.setVisible(true);
TEXT_9.setVisible(true);
PANEL_12.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_12.moveComponent(TEXT_11);
PANEL_12.setVisible(true);
TEXT_11.setVisible(true);
PANEL_12.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_12.moveComponent(TEXT_14);
PANEL_12.setVisible(true);
TEXT_14.setVisible(true);
PANEL_12.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_12.moveComponent(TEXT_15);
PANEL_12.setVisible(true);
TEXT_15.setVisible(true);
PANEL_12.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_12.moveComponent(TEXT_16);
PANEL_12.setVisible(true);
TEXT_16.setVisible(true);
PANEL_12.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_12.moveComponent(TEXT_17);
PANEL_12.setVisible(true);
TEXT_17.setVisible(true);
PANEL_12.setCSSClass("CHART_9");
}
} //8 end of the array
}// end of the array with odd
else if (arrlen ==2 || arrlen ==4 || arrlen ==6 || arrlen ==8){// if the array lenth is even
GRID_LAYOUT_9.setVisible(true);
GRID_LAYOUT_1.setVisible(false);
if (index == 0){// 0 array value
if ( element =="1"){
PANEL_7_1.moveComponent(TEXT_6);
PANEL_7_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_7_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_7_1.moveComponent(TEXT_7);
PANEL_7_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_7_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_7_1.moveComponent(TEXT_8);
PANEL_7_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_7_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_7_1.moveComponent(TEXT_9);
PANEL_7_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_7_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_7_1.moveComponent(TEXT_11);
PANEL_7_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_7_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_7_1.moveComponent(TEXT_14);
PANEL_7_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_7_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_7_1.moveComponent(TEXT_15);
PANEL_7_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_7_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_7_1.moveComponent(TEXT_16);
PANEL_7_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_7_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_7_1.moveComponent(TEXT_17);
PANEL_7_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_7_1.setCSSClass("CHART_9");
}
} //0 end of the array
else if (index == 1){// 1 array value
if ( element =="1"){
PANEL_8_1.moveComponent(TEXT_6);
PANEL_8_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_8_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_8_1.moveComponent(TEXT_7);
PANEL_8_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_8_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_8_1.moveComponent(TEXT_8);
PANEL_8_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_8_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_8_1.moveComponent(TEXT_9);
PANEL_8_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_8_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_8_1.moveComponent(TEXT_11);
PANEL_8_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_8_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_8_1.moveComponent(TEXT_14);
PANEL_8_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_8_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_8_1.moveComponent(TEXT_15);
PANEL_8_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_8_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_8_1.moveComponent(TEXT_16);
PANEL_8_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_8_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_8_1.moveComponent(TEXT_17);
PANEL_8_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_8_1.setCSSClass("CHART_9");
}
} //1 end of the array
else if (index == 2){// 2 array value
if ( element =="1"){
PANEL_5_1.moveComponent(TEXT_6);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_1");
TEXT_6.setVisible(true);
}
else if (element=="2")
{ PANEL_5_1.moveComponent(TEXT_7);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_2");
TEXT_7.setVisible(true);
}
else if (element=="3")
{ PANEL_5_1.moveComponent(TEXT_8);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_3");
TEXT_8.setVisible(true);
}
else if (element=="4")
{ PANEL_5_1.moveComponent(TEXT_9);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_4");
TEXT_9.setVisible(true);
}
else if (element=="5")
{ PANEL_5_1.moveComponent(TEXT_11);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_5");
TEXT_11.setVisible(true);
}
else if (element=="6")
{ PANEL_5_1.moveComponent(TEXT_14);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_6");
TEXT_14.setVisible(true);
}
else if (element=="7")
{ PANEL_5_1.moveComponent(TEXT_15);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_7");
TEXT_15.setVisible(true);
}
else if (element=="8")
{ PANEL_5_1.moveComponent(TEXT_16);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_8");
TEXT_16.setVisible(true);
}
else if (element=="9")
{ PANEL_5_1.moveComponent(TEXT_17);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_9");
TEXT_17.setVisible(true);
}
} //2 end of the array
else if (index == 3){// 3 array value
if ( element =="1"){
PANEL_9_1.moveComponent(TEXT_6);
PANEL_9_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_9_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_9_1.moveComponent(TEXT_7);
PANEL_9_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_9_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_9_1.moveComponent(TEXT_8);
PANEL_9_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_9_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_9_1.moveComponent(TEXT_9);
PANEL_9_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_9_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_9_1.moveComponent(TEXT_11);
PANEL_9_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_9_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_9_1.moveComponent(TEXT_14);
PANEL_9_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_9_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_9_1.moveComponent(TEXT_15);
PANEL_9_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_9_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_9_1.moveComponent(TEXT_16);
PANEL_9_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_9_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_9_1.moveComponent(TEXT_17);
PANEL_9_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_9_1.setCSSClass("CHART_9");
}
} //3 end of the array
else if (index == 4){// 4 array value
if ( element =="1"){
PANEL_4_1.moveComponent(TEXT_6);
PANEL_4_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_4_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_4_1.moveComponent(TEXT_7);
PANEL_4_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_4_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_4_1.moveComponent(TEXT_8);
PANEL_4_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_4_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_4_1.moveComponent(TEXT_9);
PANEL_4_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_4_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_4_1.moveComponent(TEXT_11);
PANEL_4_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_4_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_4_1.moveComponent(TEXT_14);
PANEL_4_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_4_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_4_1.moveComponent(TEXT_15);
PANEL_4_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_4_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_4_1.moveComponent(TEXT_16);
PANEL_4_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_4_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_4_1.moveComponent(TEXT_17);
PANEL_4_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_4_1.setCSSClass("CHART_9");
}
} //4 end of the array
else if (index == 5){// 5 array value
if ( element =="1"){
PANEL_10_1.moveComponent(TEXT_6);
PANEL_10_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_10_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_10_1.moveComponent(TEXT_7);
PANEL_10_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_10_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_10_1.moveComponent(TEXT_8);
PANEL_10_1.setVisible(true);
PANEL_10_1.setCSSClass("CHART_3");
TEXT_8.setVisible(true);
}
else if (element=="4")
{ PANEL_10_1.moveComponent(TEXT_9);
PANEL_10_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_10_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_10_1.moveComponent(TEXT_11);
PANEL_10_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_10_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_10_1.moveComponent(TEXT_14);
PANEL_10_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_10_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_10_1.moveComponent(TEXT_15);
PANEL_10_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_10_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_10_1.moveComponent(TEXT_16);
PANEL_10_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_10_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_10_1.moveComponent(TEXT_17);
PANEL_10_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_10_1.setCSSClass("CHART_9");
}
} //5 end of the array
else if (index == 6){// 6 array value
if ( element =="1"){
PANEL_11_1.moveComponent(TEXT_6);
PANEL_11_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_11_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_11_1.moveComponent(TEXT_7);
PANEL_11_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_11_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_11_1.moveComponent(TEXT_8);
PANEL_11_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_11_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_11_1.moveComponent(TEXT_9);
PANEL_11_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_11_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_11_1.moveComponent(TEXT_11);
PANEL_11_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_11_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_11_1.moveComponent(TEXT_14);
PANEL_11_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_11_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_11_1.moveComponent(TEXT_15);
PANEL_11_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_11_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_11_1.moveComponent(TEXT_16);
PANEL_11_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_11_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_11_1.moveComponent(TEXT_17);
PANEL_11_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_11_1.setCSSClass("CHART_9");
}
} //6 end of the array
else if (index == 7){// 7 array value
if ( element =="1"){
PANEL_6_1.moveComponent(TEXT_6);
PANEL_6_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_6_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_6_1.moveComponent(TEXT_7);
PANEL_6_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_6_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_6_1.moveComponent(TEXT_8);
PANEL_6_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_6_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_6_1.moveComponent(TEXT_9);
PANEL_6_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_6_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_6_1.moveComponent(TEXT_11);
PANEL_6_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_6_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_6_1.moveComponent(TEXT_14);
PANEL_6_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_6_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_6_1.moveComponent(TEXT_15);
PANEL_6_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_6_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_6_1.moveComponent(TEXT_16);
PANEL_6_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_6_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_6_1.moveComponent(TEXT_17);
PANEL_6_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_6_1.setCSSClass("CHART_9");
}
} //7 end of the array
}// the end of array with even
});//end of the array
CSS代码如下。
.CHART_1 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #CC9F03;
text-align: center !important;
}
.CHART_2 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #00877D;
text-align: center !important;
}
.CHART_3 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #FFAD72;
text-align: center !important;
}
.CHART_4 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #7C98B3;
text-align: center !important;
}
.CHART_5 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #800000;
text-align: center !important;
}
.CHART_6 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #004080;
text-align: center !important;
}
.CHART_7 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #800080;
text-align: center !important;
}
.CHART_8 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #ffff00;
text-align: center !important;
}
.CHART_9 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #8000ff;
text-align: center !important;
}
