机器数据分析平台

  • 机器数据分析平台 > 应用开发者文档 > 可视化APP开发手册 >可视化APP开发步骤 > 自定义图表样式配置表单

    自定义图表样式配置表单

    最近更新时间:2020-05-06 15:47:47

    Pandora 2.0平台提供了常用的表单组件,支持通过xml的方式自定义图表属性的配置表单。
    比如,图表有了配置表单之后,您可以通过如下的样式配置设置图表的样式。

    这一节分为以下4点介绍配置图表样式表单的方式:

    • 1.配置表单的xml元素

    • 2.定义表单校验规则

    • 3.设置input元素的动态选项

    • 4.定义input元素的过滤器

    1.配置表单的xml元素

    1.1. 表单元素

    visualization-form

    作为表单配置的顶层元素,所有form元素需使用 visualization-form 包裹。

    1.2. 布局元素

    Collapse:折叠面板

    属性 说明 类型 默认值
    defaultActiveKey 默认展开的 panel 的 keys,展开所有 'all', 不展开 'none' string 或 string[] 'none'
    accordion 是否打开手风琴模式, 最多智能打开一个折叠板 boolean false

    Collapse.panel

    属性 说明 类型 默认值
    panelKey 当前 panel 的 key string ''
    title 标题 string ''

    1.3. 输入类型元素

    1.3.1. input

    公共属性

    属性 说明 类型 默认值
    field 属性名称, 嵌套类型可用 a.b string ' '
    required 是否必填,为 true 是自动做不能为空校验 boolean false

    公共子元素

    元素名称 描述 required
    rule 用于实现表单校验规则 no
    label 输入表单项的显示名称 yes
    initial-value 输入表单项的初始值 yes

    1.3.1.1. 文本输入类:输入值类型的表单元素

    text

    示例:

    <input type="text" field="name">
      <label>展示名称</label>
      <initial-value></initial-value>
    </input>
    

    number

    text类似,区别在于其值只能为数值类型。

    示例:

    <input type="number" field="size">
      <label>字号</label>
      <initial-value>12</initial-value>
    </input>
    

    1.3.1.2. 选择类:选择输入类表单

    公共子元素:

    元素名称 描述 required
    choice 定义选择类表单的选项,<choice value="{value}">{label}</choice>,可以指定选项的{value}和对应的{label} no
    filter 用于过滤表单的选项 no
    dataset 用于动态指定表单元素的选项 no

    dropdown

    示例:

    <input type="dropdown" field="align">
      <label>对其方式</label>
      <initial-value>left</initial-value>
      <choice value="left">向左</choice>
      <choice value="center">居中</choice>
      <choice value="right">向右</choice>
    </input>
    

    multiselect

    <input type="multiselect" field="fields">
      <label>展示字段</label>
      <initial-value>["longitude", "latitude"]</initial-value>
      <choice value="one">longitude</choice>
      <choice value="two">latitude</choice>
      <choice value="avg(count)">avg(count)</choice>
    </input>
    

    radio

    <input type="radio" field="status">
      <label>标签显示状态</label>
      <initial-value>on</initial-value>
      <choice value="on">显示</choice>
      <choice value="off">隐藏</choice>
    </input>
    

    checkbox

    <input type="checkbox" field="displayMetrics">
      <label>数值显示</label>
      <initial-value>["value"]</initial-value>
      <choice value="value">数值</choice>
      <choice value="percentage">百分比</choice>
    </input>
    

    1.3.2其他输入类型元素

    unit

    常用单位选择元素

    <input type="unit" field="unit">
      <label>单位</label>
      <initial-value>["none", "none"]</initial-value>
    </input>
    

    color-pick

    <input type="color" field="fontColor">
      <label>字体颜色</label>
      <initial-value>#111111</initial-value>
    </input>
    

    2.定义表单校验规则

    支持内置校验规则和自定义校验规则,目前支持通过 <pattern><required><function>元素校验表单内容。

    • pattern:通过正则表达式校验表单输入内容,输入正则字符串即可。例如:<pattern>\d<pattern>
    • required:标识该字段是否为必填项,可直接在表单通过 required 属性设置,在这里可通过<message>设置校验失败文案。
    • function:自定义函数,可在visualization.js中导出该函数名函数去校验。校验失败,函数返回错误提示,校验成功返回空串即可。函数参数为:
      • value: 当前表单值
      • config: 所有表单值
    <input type="number" field="valid">
      <label>标签</label>
      <initial-value>123</initial-value>
      <rule>
        <function>validator</function>
      </rule>
    </input>
    

    内置校验规则

    内置校验规则为 pattern 类型,直接作为 pattern 值传入即可。

    • 支持您校验表单输入内容是否为数值:
    <input type="number" field="field">
      <label>标签</label>
      <initial-value>123</initial-value>
      <rule>
        <pattern>number</pattern>
        <message>该字段必须为数值类型</message>
      </rule>
    </input>
    
    • 支持您校验表单输入内容是否为整数类型:
    <input type="number" field="decimal">
      <label>百分比小数位</label>
      <initial-value>2</initial-value>
      <rule>
        <pattern>integer</pattern>
        <message>该字段必须为整数类型</message>
      </rule>
    </input>
    

    3.根据搜索分析结果动态生成选项

    input的选项支持通过搜索分析结果动态生成,添加dataset标签即可。

    将搜索结果字段设置为input的选项

    dataset标签的值设置为"fields",可将搜索结果的所有字段名作为input的可选项。

    假设搜索结果为:

    longitude latitude avg(count)
    -118.2959851 34.0576289 200
    116.3579939 39.9587664 110
    -74.0392709 40.7590403 180

    如下:设置表单项分组字段的可选项是搜索果字段名,

    <input type="dropdown" field="bucket">
      <label>分组字段</label>
      <dataset>fields</dataset>
    </input>
    

    结果:

    将搜索结果字段对应的值设置为input的选项

    dataset标签的值为"column", 将搜索结果字段对应的值设置为input的选项。其中:

    field-for-value:设置可选项的值。
    field-for-label:设置可选项的值显示名称。

    仍然以上面的搜索结果为例,表单配置如下

    <input type="dropdown" field="avgValue">
      <label>平均值</label>
      <dataset>column</dataset>
      <field-for-label>avg(count)</field-for-label>
      <field-for-value>avg(count)</field-for-value>
    </input>
    

    配置效果:

    4.设置input元素的选项过滤器

    input元素支持自定义函数来过滤选项,在visualization.js中定义该函数并将函数名通过filter标签添加到input下方。函数参数为:

    • choice: 当前选项,包含以下属性:
      • value: 当前选项的值。
      • text: 当前选项的值对应的显示名称。
      • row: 当前选项对应的dataset(搜索分析结果)行。
    • config: 所有表单元素。
    • row: 同 choice标签里的row属性。
    • dataset: 当前图表对应的搜索结果数据。
    <input type="dropdown" field="avgValue">
      <label>平均值</label>
      <initial-value>column</initial-value>
      <filter>itemFilter</filter>
      <field-for-label>avg(count)</field-for-label>
      <field-for-value>avg(count)</field-for-value>
    </input>
    

    itemFilter函数定义:

    function itemFilter(choice, config, row, dataset) {
      return choice.value > 150
    }
    

    配置效果如下,可选项仅包含:200, 180

    以上内容是否对您有帮助?
  • Icon free helper
    Close