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

Question

在报告 V5x 的 iccube 中，我可以通过在 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 引入了新的自定义主题管理：

运行-次

现在可以在运行时间内使用 Public 报告上下文 load/change 主题 API:

Demonstration report

Javascript 使用 "Change colors" 按钮执行的片段：

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 主题管理器将注册放置在全局 JavaScript 范围内且以 ic3Theme 开头的任何主题（例如 window.ic3ThemeElegant），并且它将作为一个选项在 "Report Settings" 中可用。

例如，您可以在 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 reporting v6 中使用自定义主题？

How to use custom theme in iccube reporting v6?

theming

iccube-reporting

运行-次

预加载