Question

在iccube报告V5x中，我可以通过在ic3report-config.js

中添加以下说明来加载自定义主题

ic3RegisterTheme('Pkcs', 'theme/', 'PkcsTheme.js' , 'PkcsTheme.css' );

然后在pkcstheme.js内，我用了

var ic3;
(function(a) {
    a.Themes.registerTheme({
        name: "PKCS",
        cssCls: "pkcs-theme",
        boxHeaderCls: "pkcs-header",
        reportContainerDefaultStyle: "pkcs",
        amChartsDefaultStyle: "Pkcs Main",
etc...

但是，在V6中，a.Themes.registerTheme不存在......

现在这样做的正确方法是什么？

Answer 1

IcCube v6.1引入了新的自定义主题管理：

运行时

现在可以使用公共报告上下文API在运行时加载/更改主题：

Demonstration report

使用“更改颜色”按钮执行的Javascript代码段：

function(context, item) {
    if(!window.demotheme){
        window.demotheme = _.cloneDeep(window.ic3ThemeElegant);
    }

    demotheme.id = "ic3-demotheme";
    demotheme.name = "Demo";

    demotheme.vars.palette = ["#374649", "#fd625e", "#f2c80f", "#01b8aa", "#79c75b", "#8ad4eb"];
    demotheme.vars.backgroundColor = "#eaeaea";
    demotheme.vars.borderColor = "#eaeaea";


    // adding variable to a theme
    demotheme.vars.boxBackgroundColor = "white";


    context.setTheme(demotheme);
}

预压

IcCube主题管理器将注册放置在以ic3Theme开头的全局JavaScript范围内的任何主题（例如window.ic3ThemeElegant），它将作为选项在“报告设置”中提供。

例如，您可以在ic3report-local.js中使用此类代码：

$script(options.rootLocal + 'ic3ThemeWhiteBox.js', function(){
      options.callback && options.callback();                                                  
   })

ic3ThemeWhiteBox.js的内容是：

window.ic3ThemeWhiteBox = {
            "id": "ic3-white-box",
            "name": "White Box",
            //... theme definition ...
    })

如何在iccube报告v6中使用自定义主题？

1 个答案:

运行时

预压