自定义图表样式配置表单

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

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

• 1.配置表单的xml元素

• 2.定义表单校验规则

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

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

1.配置表单的xml元素

1.1. 表单元素

visualization-form

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

1.2. 布局元素

Collapse：折叠面板

Collapse.panel

1.3. 输入类型元素

1.3.1. input

公共属性

公共子元素

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. 选择类：选择输入类表单

公共子元素：

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的可选项。

假设搜索结果为：

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

<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。