QlikSense 2018.2月版起支持主题开发

自定义主题开发

// 主题是qliksense 2018年2月版提出,4月版正式实施,其实就是去修改sense默认的.json文件和.css文件

{
  // 定义自定义主题是否从默认主题(Sense Classic)继承样式属性。JSON文件中定义的属性会覆盖继承的属性。默认ture
  "_inherit": false,
  //(可选) 可以在JSON文件中引用的变量。
  "_variables": {
    "@default": "#555555",
    "@dark": "#333333",
    "@light": "#eeeeee",
    "@H1": "24px",
    "@H2": "18px",
    "@H3": "14px",
    "@H4": "13px",
    "@H5": "12px",
    "@font-normal": "12px"
  },
  // (可选) 引用将在应用主题时插入的自定义样式表。
  "customStyles": [{
    "cssRef": "theme.css",
    "classRef": "my-theme"
  }],
  // 字体颜色。可以通过在任何支持颜色的级别上定义颜色属性来覆盖此设置
  "color": "@default",
  //     字体大小。可以通过在支持fontSize的任何级别上定义fontSize属性来覆盖此设置
  "fontSize": "@font-normal",
  //     图表的背景颜色。可以通过在图表类型级别定义背景颜色属性来覆盖此设置。
  "backgroundColor": "@light",
  // 对象样式。
  "object": {
    // 标题属性。可以通过在图表类型级别定义title属性来覆盖此设置。
    "title": {
      // 主标题
      "main": {
        "color": "@default",
        "fontSize": "@font-normal"
      },
      // 副标题
      "subTitle": {
        "color": "@default",
        "fontSize": "@font-normal"
      },
      // 脚标题
      "footer": {
        "color": "@default",
        "fontSize": "@font-normal",
        "backgroundColor": "@light"
      }
    },
    // 标签属性。可以通过在图表类型级别为具有标签的图表定义label属性来覆盖此设置。
    // 以下图表类型支持标签属性:
    // barChart 条形图 (label.name.color; label.value.fontSize)
    // gauge 仪表盘 (label.name.color;)
    // histogram 直方图 (label.name.color; label.value.fontSize)
    // lineChart 线型图 (label.name.color; label.value.fontSize)
    // pieChart 饼图 (label.name.color; label.name.fontSize;label.value.fontSize)
    //scatterPlot 散点图 (label.name.color; label.value.fontSize)
    // waterfallChart 瀑布图 (label.value.fontSize)
    "label": {
      // 标签名称属性。
      "name": {
        "color": "@default",
        "fontSize": "10px"
      },
      // 标签值属性。
      "value": {
        "color": "@default",
        "fontSize": "10px"
      }
    },
    //    轴属性。通过在图表类型级别上为具有轴的图表(条形图,箱形图,组合图,分布图,仪表,直方图,折线图,散点图和瀑布图)定义轴属性,可以覆盖此设置。
    // 对于饼图,可以覆盖axis.title并用于为尺寸标签设置样式。
    "axis": {
      // 轴标题属性。
      "title": {
        "fontSize": "@font-normal",
        "color": "@default"
      },
      //     轴标签属性。
      "label": {
        "name": {
          "color": "@default",
          "fontSize": "@font-normal"
        }
      },
      // 轴线属性。
      "line": {
        "major": {
          "color": "@default"
        },
        "minor": {
          "color": "@default"
        }
      }
    },
    // 网格属性。无法在图表类型级别覆盖此设置。
    "grid": {
      // 线属性
      "line": {
        // 高对比度
        "highContrast": {
          "color": "@default"
        },
        // 主要
        "major": {
          "color": "@default"
        },
        // 次要
        "minor": {
          "color": "@default"
        }
      }
    },
    //     参考线属性。无法在图表类型级别覆盖此设置。
    "referenceLine": {
      // 标签属性
      "label": {
        "name": {
          "color": "@default",
          "fontSize": "@font-normal"
        }
      },
      // 超出范围的属性。
      "outOfBounds": {
        "color": "@default",
        "backgroundColor": "@default",
        "fontSize": "@H6"
      }
    },
    // 图例 通过在图表类型级别为带有图例的图表(条形图,组合图,折线图,饼图,散点图,树图,瀑布图)定义图例属性,可以覆盖此设置。
    "legend": {
      // 图例标题
      "title": {
        "color": "@default",
        "fontSize": "@font-normal"
      },
      // 图例标签
      "label": {
        "color": "@default",
        "fontSize": "@font-normal"
      }
    },
    // 图表类型 这些是可以存在于对象结构中的常见图表类型属性。为每个图表列出的属性是特定的
    // 大多数全局对象属性也可以在图表类型级别上定义。如果完成,则覆盖全局对象级别上设置的属性。
    // 条形图
    "barChart": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "axis": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "name": {
            "color": "@default",
            "fontSize": "@font-normal"
          }
        },
        "line": {
          "major": {
            "color": "@default"
          },
          "minor": {
            "color": "@default"
          }
        }
      },
      "legend": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "fontSize": "@font-normal",
          "color": "@default"
        }
      },
      "label": {
        "value": {
          "color": "@default",
          "fontSize": "@font-normal"
        }
      },
      // 超出范围的属性。
      "outOfRange": {
        "color": "@default"
      }
    },
    // 箱型图
    "boxPlot": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "axis": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "name": {
            "color": "@default",
            "fontSize": "@font-normal"
          }
        },
        "line": {
          "major": {
            "color": "@default"
          },
          "minor": {
            "color": "@default"
          }
        }
      },
      "box": {
        "whisker": {
          "stroke": "@default"
        },
        "line": {
          "stroke": "@default"
        },
        "box": {
          "fill": "@default",
          "stroke": "@default"
        }
      }
    },
    // 组合图
    "comboChart": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "axis": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "name": {
            "color": "@default",
            "fontSize": "@font-normal"
          }
        },
        "line": {
          "major": {
            "color": "@default"
          },
          "minor": {
            "color": "@default"
          }
        }
      },
      "legend": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "fontSize": "@font-normal",
          "color": "@default"
        }
      }
    },
    // 分布图
    "distributionPlot": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "axis": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "name": {
            "color": "@default",
            "fontSize": "@font-normal"
          }
        },
        "line": {
          "major": {
            "color": "@default"
          },
          "minor": {
            "color": "@default"
          }
        }
      },
      "box": {
        "fill": "@default"
      }
    },
    // 过滤器?
    "filterpane": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      }
    },
    // 仪表盘
    "gauge": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "axis": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "name": {
            "color": "@default",
            "fontSize": "@font-normal"
          }
        },
        "line": {
          "major": {
            "color": "@default"
          },
          "minor": {
            "color": "@default"
          }
        }
      },
      "label": {
        "value": {
          "color": "@default"
        }
      }
    },
    // 直方图
    "histogram": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "axis": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "name": {
            "color": "@default",
            "fontSize": "@font-normal"
          }
        },
        "line": {
          "major": {
            "color": "@default"
          },
          "minor": {
            "color": "@default"
          }
        }
      },
      "label": {
        "value": {
          "color": "@default",
          "fontSize": "40px"
        }
      }
    },
    // 指标
    "kpi": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      }
    },
    // 线型图
    "lineChart": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "axis": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "name": {
            "color": "@default",
            "fontSize": "@font-normal"
          }
        },
        "line": {
          "major": {
            "color": "@default"
          },
          "minor": {
            "color": "@default"
          }
        }
      },
      "legend": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "fontSize": "@font-normal",
          "color": "@default"
        }
      },
      "outOfRange": {
        "color": "@default"
      },
      "label": {
        "value": {
          "color": "@dark",
          "fontSize": "@font-normal"
        }
      }
    },
    // 列表框
    "listBox": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        }
      },
      "content": {
        "color": "@default",
        "fontSize": "@font-normal"
      }
    },
    // 地图
    "mapChart": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      }
    },
    // 饼图
    "pieChart": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "axis": {
        "title": {
          "color": "@default",
          "fontSize": "@font-normal"
        }
      },
      "legend": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "fontSize": "@font-normal",
          "color": "@default"
        }
      },
      "label": {
        "name": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "value": {
          "fontSize": "@font-normal"
        }
      }
    },
    //数据透视表
    "pivotTable": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "header": {
        "fontSize": "@font-normal",
        "color": "@default"
      },
      "content": {
        "fontSize": "@font-normal",
        "color": "@default"
      }
    },
    // 散点图
    "scatterPlot": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "axis": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "name": {
            "color": "@default",
            "fontSize": "@font-normal"
          }
        },
        "line": {
          "major": {
            "color": "@default"
          },
          "minor": {
            "color": "@default"
          }
        }
      },
      "legend": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "fontSize": "@font-normal",
          "color": "@default"
        }
      },
      "label": {
        "value": {
          "color": "@default",
          "fontSize": "@font-normal"
        }
      }
    },
    // 表???
    "straightTable": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "header": {
        "fontSize": "@font-normal",
        "color": "@default"
      },
      "content": {
        "fontSize": "@font-normal",
        "color": "@default"
      }
    },
    // 文字图片
    "textImage": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      }
    },
    // 树形图
    "treemap": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "legend": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "fontSize": "@font-normal",
          "color": "@default"
        }
      },
      "branch": {
        "backgroundColor": "@default",
        "label": {
          "color": "@light",
          "fontSize": "@font-normal"
        }
      },
      "leaf": {
        "label": {
          "fontSize": "@font-normal"
        }
      }
    },
    // 瀑布图
    "waterfallChart": {
      "backgroundColor": "@light",
      "title": {
        "main": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "subTitle": {
          "color": "@default",
          "fontSize": "@font-normal"
        },
        "footer": {
          "color": "@default",
          "fontSize": "@font-normal",
          "backgroundColor": "@light"
        }
      },
      "axis": {
        "title": {
          "fontSize": "@font-normal",
          "color": "@default"
        },
        "label": {
          "name": {
            "color": "@default",
            "fontSize": "@font-normal"
          }
        },
        "line": {
          "major": {
            "color": "@default"
          },
          "minor": {
            "color": "@default"
          }
        }
      },
      "legend": {
        "label": {
          "fontSize": "@font-normal",
          "color": "@default"
        }
      },
      "label": {
        "value": {
          "fontSize": "@font-normal"
        }
      },
      "value": {
        "color": {
          "default": "@default",
          "dark": "@dark",
          "light": "@light"
        }
      },
      // 形状
      "shape": {
        "positiveValue": {
          "fill": "white"
        },
        "negativeValue": {
          "fill": "#ccccc"
        },
        "subtotal": {
          "fill": "#000000"
        },
        "bridge": {
          "stroke": "#333333"
        }
      }
    }
  },
  // 数据颜色属性。
  "dataColors": {
    // 原色
    "primaryColor": "blue",
    // 其他色
    "othersColor": "grey",
    // 错误颜色
    "errorColor": "red",
    // 空值颜色
    "nullColor": "yellow"
  },
  // 调色板  按维度取色范围
  "palettes": {
    // 数据调色板的属性。这些用于属性面板中的尺寸颜色。
    "data": [{
        // 可选的。调色板的名称。
        "name": "First data palette",
        // 显示UI中调色板名称
        "translation": "12 colors",
        // 调色板的标识符。必须在系统中是唯一的。
        "propertyValue": "data-palette-1",
        // 调色板的类型。pyramid金字塔 row 行
        "type": "pyramid",
        // 调色板中使用的所有颜色的定义。从上到下,从左到右缩放。
        "scale": [
          ["#4477aa"],
          ["#4477aa", "#cc6677"],
          ["#4477aa", "#ddcc77", "#cc6677"],
          ["#4477aa", "#117733", "#ddcc77", "#cc6677"],
          ["#332288", "#88ccee", "#117733", "#ddcc77", "#cc6677"],
          ["#332288", "#88ccee", "#117733", "#ddcc77", "#cc6677", "#aa4499"],
          ["#332288", "#44aa99", "#88ccee", "#117733", "#ddcc77", "#cc6677", "#aa4499"],
          ["#332288", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#cc6677", "#aa4499"],
          ["#332288", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
          ["#332288", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#661100", "#cc6677", "#882255", "#aa4499"],
          ["#332288", "#6699cc", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#661100", "#cc6677", "#882255", "#aa4499"],
          ["#332288", "#6699cc", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#661100", "#cc6677", "#aa4466", "#882255", "#aa4499"]
        ]
      },
      {
        "name": "Second data palette",
        "translation": "4 Colors",
        "propertyValue": "data-palette-2",
        "type": "row",
        "scale": [
          "#ff00ff",
          "#00ff00",
          "#0000ff",
          "#000000"
        ]
      }
    ],
    //     UI调色板的属性。您可以定义几个调色板,但是在颜色选择器中使用ui中定义的第一个调色板,例如,当用单色时/维度/度量/按表达式。
    "ui": [{
      // 调色板名称
      "name": "Palette",
      // UI调色板中使用的颜色。应始终定义唯一的颜色。
      "colors": [
        "#cccccc",
        "#aaaaaa",
        "#111111",
        "#999999",
        "#acacac",
        "#dddddd",
        "#eeeeee",
        "#ffffff",
        "#000000"
      ]
    }]
  },
  //  按度量取色范围 这些是常见的配色方案属性。在“属性”面板中,缩放用于“测量颜色”。
  "scales": [
    {
      // 配色方案名称(自定义顺序渐变)
      "name": "Custom Sequential Gradient",
      // 显示UI中颜色方案的名称
      "translation": "Custom Sequential Gradient",
      // 配色方案的属性值 sg(Sequential Gradient 顺序渐变)sc(Sequential Class顺序类)dg(Diverging gradient 发散渐变)dc(Diverging Classes 发散类)
      "propertyValue": "sg",
      // 配色方案的类型。gradient渐变 classes类
      "type": "gradient",
      //     颜色方案中包含的颜色,从左到右缩放。
      "scale": ["#1A2980", "#26D0CE"]
    },
    {
      "name": "Custom Sequential Classes",
      "translation": "Custom Sequential Classes",
      "propertyValue": "sc",
      "type": "class",
      "scale": ["#d32b1d", "#023474"]
    },
    {
      "name": "Custom Diverging gradient",
      "translation": "Custom Diverging gradient",
      "propertyValue": "dg",
      "type": "gradient",
      "scale": ["#1A2980", "#FFFFFF", "#26D0CE", "#d32b1d"]
    },
    {
      "name": "Custom Diverging Classes",
      "translation": "Custom Diverging Classes",
      "propertyValue": "dc",
      "type": "class",
      "scale": ["#9C824A", "#EF0107", "#DB0007", "#FFFFFF", "#023474"]
    }
  ]
}

// 详情请参阅官方文档:https://help.qlik.com/en-US/sense-developer/February2018/Subsystems/Extensions/Content/CustomThemes/custom-themes-properties.htm?_ga=2.57217962.1673536238.1523350076-225234654.1523350076

 

转载于:https://www.cnblogs.com/shengnan-2017/p/9272147.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值