简介 #

筛选器是仪表盘中最常见的交互组件，允许用户选择条件后动态刷新相关图形。SmartChart 通过特殊 id 命名约定（id_select__name__）自动识别筛选器组件并处理联动逻辑。

实现流程速查 #

通用实现方式 #

SMARTCHART实现筛选最简单的方法只需要配一个控件即可:
建立一个筛选清单数据集, 自动获取筛选的列表,那么可以这么写

 select xxxx as city from tablename..... 
 -- 则会生成一个如下的数据集: 
 [['city'],[选项1],[选项2],..]

良好的习惯, 先保存在数据集 然后在筛选器数据集中的js编辑器(图形编辑器),填下如下代码:

//如要要美化, 自已加样式, 只要保证id="id_select__name__"
let dataset=__dataset__;
let table ='<span>标题</span><select  id="id_select__name__">';
table = table + '<option value="" selected>----</option>';
 for(let i=1;i<dataset.length;i++){ 
  table = table + '<option>' + dataset[i][0] + '</option>';
 }
table = table + '</select></div></div>'

dom__name__.innerHTML=table;

这个时候你已经可以看到筛选器了

现在我们来设定联动效果

假设需要被筛选的数据集的SQL这样写,数据集的序号是0 那么在需要被联动的数据集中,如使用pcity做为参数写查询, 比如:

select xx, xx, xx from tablename /* where xx = '$pcity' */

现在回到我们筛选器数据集,点击标题的位置, 我们需要使0号图形被筛选器联动, 设置如下即可:

然后你就可以看到筛选效果了, 非常的简单方便, 需要多个图形被联动, 只需用逗号分隔即可 比如: 0, 2, 4

筛选器的美化请学习样式调整

关键命名约定 #

__name__ 是 SmartChart 的魔法占位符，保存图形时会自动替换为实际的数据集序号（如 0、1），所以开发时写 __name__ 即可，无需手动管理序号。