# Smartchart开发手册

https://help.smartchart.cn/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/ Recent content on Smartchart开发手册 Hugo -- gohugo.io

#

https://help.smartchart.cn/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%8F%82%E6%95%B0%E7%BC%96%E5%86%99%E6%96%B9%E6%B3%95/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%8F%82%E6%95%B0%E7%BC%96%E5%86%99%E6%96%B9%E6%B3%95/ 使用场景 # 需要使用图表联动效果 数据服务接口开发 使用魔法方法(smartchart独创,拒绝抄袭) # 基础原理 # 1. $参数名 : 当有传递参数时将替换相关的值 2. /* ... $参数名 ... */ : 当参数写在这个区间时, 如果外部没有传入参数, 会自动忽略这一段代码 3. -- : 标识之后单行的代码会被忽略 常见组合应用 # 理解以下样列后, 可录活使用组合出各种可能的需求 默认参数: 实现在不传参数时默认参数是当前月份 select xx from tablename where calmonth =/*&#39;$calmonth&#39; -- */ to_char(sysdate,&#39;YYYYMM&#39;) 多个参数: 注意使用1=1及and的位置 select xx from tablename where 1=1 /* and city = &#39;$city&#39; */ /* and calmonth =&#39;$calmonth&#39;*/ 维度变化: 将字段当成参数 select /*$calmonth,*/ city, count(1) as qty from tablename group by /*$calmonth,*/ city 维度变化: 当传入月份条件时, 按城市,月份的数据, 不传参数时只看按城市的总数 select /*月份, -- $Month */ 城市, sum(度量) from tablename where 1=1 /* and 月份 &gt; &#39;$Month&#39; */ group by 城市 /*,月份 -- $Month*/ 高级开关应用 # 以上应用可以通过参数是否有传递来实现开关代码段的效果, 有些场景可能还希望通过参数值来进行代码段的开关 如下代码可以实现当传递参数type=1 或 type=2 时执行不同的代码段 使用 &ldquo;$参数__值&rdquo; 的方式做为开关

#

https://help.smartchart.cn/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%9B%BE%E5%BD%A2%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%9B%BE%E5%BD%A2%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/
数据集准备 # 首先在需要进行联动的数据集中SQL的写法如下, 比如对应2号图形: 注意 /* ... */的写法, 当参数写在这个区间时, 如果外部没有传入参数, 会自动忽略这一段代码, 这样对于联动来说非常重要, 初始时全部显示, 点击其它图形时传入参数进行动态联动 select xxx,xxx,xxx from tablename /* where xxxx = &#39;$参数名&#39; */ .... 建意观看视屏比较容易理解: 数据联动说明 常规方法 # 比如你需要点击0号图形, 指定其它图形联动 你只需要打开0号图形的数据集编辑页面, 点击标题的位置 然后输入相关的参数即可, 以下为sample 参数值设定的方法, 你可以先留空, 然后保存, F12打开浏览器调试方法 点击0号图形你需要点击的动作, 你可以在调试窗口的console看到输入的log 比如我们需要传递的参数值是&quot;廉颇&quot;, 那么取数据的方法就是data.name, 你把这个填入即可 这样就实现按所选数据或所选系列钻取/联动了, 重新点击当前所选, 恢复原来的 TIPS: 在图形编辑器中, 可以使用函数 ds_param(&lsquo;参数名&rsquo;) 来获取传入的参数值 高级定制方法 # 如有更多个性化需求,可在需要点击的图形的编辑器中加入以下代码,仅需修改的是序号和参数名 //比如传入多个参数进行联动 myChart__name__.on(&#39;click&#39;, function(params){ let myparam = params.seriesName; //获取点击的值 ds_setParam(&#39;参数名&#39;, myparam); //填写你的数据集的SQL设定中对应的参数名 ds_setParam(&#39;参数名2&#39;, myparam2); //你可以赋值给多个参数 ds_refresh(3); //3 为你要刷新图形序号 }); //函数方法说明 ds_setParam(&#39;参数名&#39;, 参数值) 此方法将自动判断当参数值为空时, 删除参数回到初始未传参状态 你还可以实现钻取到另外一个报表

#

https://help.smartchart.cn/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%AD%9B%E9%80%89%E5%99%A8%E6%8C%87%E5%8D%97/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%AD%9B%E9%80%89%E5%99%A8%E6%8C%87%E5%8D%97/
通用实现方式 # SMARTCHART实现筛选最简单的方法只需要配一个控件即可: 建立一个筛选清单数据集, 自动获取筛选的列表,那么可以这么写 select xxxx as city from tablename..... -- 则会生成一个如下的数据集: [[&#39;city&#39;],[选项1],[选项2],..] 良好的习惯, 先保存在数据集 然后在筛选器数据集中的js编辑器(图形编辑器),填下如下代码: //如要要美化, 自已加样式, 只要保证id=&#34;id_select__name__&#34; let dataset=__dataset__; let table =&#39;&lt;span&gt;标题&lt;/span&gt;&lt;select id=&#34;id_select__name__&#34;&gt;&#39;; table = table + &#39;&lt;option value=&#34;&#34; selected&gt;----&lt;/option&gt;&#39;; for(let i=1;i&lt;dataset.length;i++){ table = table + &#39;&lt;option&gt;&#39; + dataset[i][0] + &#39;&lt;/option&gt;&#39;; } table = table + &#39;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;&#39; dom__name__.innerHTML=table; 这个时候你已经可以看到筛选器了 现在我们来设定联动效果 假设需要被筛选的数据集的SQL这样写,数据集的序号是0 那么在需要被联动的数据集中,如使用pcity做为参数写查询, 比如: select xx, xx, xx from tablename /* where xx = &#39;$pcity&#39; */ 现在回到我们筛选器数据集,点击标题的位置, 我们需要使0号图形被筛选器联动, 设置如下即可: 然后你就可以看到筛选效果了, 非常的简单方便, 需要多个图形被联动, 只需用逗号分隔即可 比如: 0, 2, 4

#

https://help.smartchart.cn/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%BB%84%E4%BB%B6%E8%87%AA%E5%AE%9A%E4%B9%89%E8%81%94%E5%8A%A8/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%BB%84%E4%BB%B6%E8%87%AA%E5%AE%9A%E4%B9%89%E8%81%94%E5%8A%A8/
应用场景 # Smartchart对于单项筛选有通用的组件， 可以直接配置即可，但对于个性化的筛选，需要你进行一些简单的定制化，以下就针对多项筛选联动的需求来介绍如何定制化你的筛选联动效果 通过此例,你可以了解如何自定义任意的联动效果 样列参考 # 以我们内置的仪表盘为例， 第一步，新建一个图形组件 第二步，在新的数据集中编写查询 select distinct H1 as heroname from smartdemo2 limit 10 第三步，编辑此数据集的图形，可复制以下代码 //select distinct xx from tablename let dataset=__dataset__; let table = &#39;&#39;; for (let i=1;i&lt;dataset.length;i++){ table = `${table}&lt;label&gt;&lt;input name=&#34;select__name__&#34; type=&#34;checkbox&#34; value=&#34;${dataset[i][0]}&#34; /&gt;${dataset[i][0]}&lt;/label&gt; `; } table = table + &#34;&lt;button id=&#39;id_select__name__&#39;&gt;提交&lt;/button&gt;&#34;; dom__name__.innerHTML=table; $(&#39;#id_select__name__&#39;).click( function(){ let res = []; $(&#34;input[name=&#39;select__name__&#39;]:checked&#34;).each(function(i){ res.push(&#34;&#39;&#34; + $(this).val() + &#34;&#39;&#34;); }); ds_setParam(&#39;H1&#39;,res.toString()); //参数赋值 ds_refresh(1); //刷新1号图形 } ) 第四步，在你要联动刷新的目标数据集中增加代码