# Smartchart开发手册

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/ Recent content on Smartchart开发手册 Hugo -- gohugo.io

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%AE%9E%E6%88%98%E5%A4%A7%E5%B1%8F%E6%A8%A1%E6%9D%BF%E8%BD%AC%E5%8C%96/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%AE%9E%E6%88%98%E5%A4%A7%E5%B1%8F%E6%A8%A1%E6%9D%BF%E8%BD%AC%E5%8C%96/ 应用场景 # 已有开发好的非smartchart静态大屏模板(这种模板非常多, 不要上当) 对js, css及smartchart已有初始了解 业务需求展示有合适的模板, 变化不大 如何使用 # 请观看系列视屏, 相信人人都会 头条视屏: 大屏模板转化系列 B站视屏: 大屏模板转化系列

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1API/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1API/
SmartChart的数据集功能, 可以非常方便的实现数据对外微服务 # 权限设定 # 如果你使用的是自已搭建的django项目, 你需要在项目的根目录下新建一个JSON文件, 如果是使用smartchart启动的, 配置文件在项目的安装目录下可以找到 名为apiconfig.json, 比如需要调用API的用户名为test 和 test2，用户名需要是在你的用户设定中存在的,内容如下: { &#34;test&#34;: { &#34;token&#34;: &#34;smartchart&#34; }, &#34;test2&#34;: { &#34;token&#34;: &#34;smartchartxxx&#34;, &#34;host&#34;: [&#34;10.10.10.10&#34;,&#34;10.10.10.23&#34;], &#34;limit&#39;: 60, &#34;log&#34;:1, &#34;cors&#34;: 1 } } 可选设定参考test2 host:API白名单配置，limit:一分钟内可调用次数, log:日志记录方式. cors:永许跨域访问 然后你只需要将你的数据集中的权限设定给对应的用户即可 请求方式 # 加密接口请求方式（推荐） # GET 请求 # #接口请求格式: url: /echart/dataset_api/?visitor=xxx&amp;token=xxx&amp;type=xxx&amp;stamp=xxxxx&amp;param={&#34;xx&#34;:&#34;xxx&#34;,&#34;xx&#34;:&#34;xxxx&#34;} # 参数说明 visitor: 用户名 type: 接口数据集ID stamp: 时间戳(1970年1月1日到生成时间的毫秒数) token: 采用sha1加密, token=SHA1(秘钥 + stamp + Visitor + Type) param: 传入的参数值(可选)，格式json字符串，如多个参数: &#39;{&#34;参数A&#34;:&#34;xxxx&#34;, &#34;参数B&#34;:&#34;xxxx&#34;}&#39; # 接口返回格式 Json: { &#34;data&#34;:[[]], &#34;result&#34;:&#34;success&#34;, &#34;maxpg&#34;:1, &#34;pg&#34;:1 } 返回值说明： data : 二维数组，第一行为表头， 样列数据 [[&#34;heroname&#34;, &#34;qty&#34;],[&#34;镜&#34;,658],[&#34;猪八戒&#34;,591]] result : success 或 error maxpg/pg : GET请求固定为1不分页 POST请求(适用于后台定时同步数据，查询请用GET请求方法) # #接口请求格式: url: /echart/dataset_api/ # 请求参数说明 data: { &#34;visitor&#34;:&#34;xxx&#34;, &#34;token&#34;:&#34;xxx&#34;, &#34;stamp&#34;:xxxxx, &#34;type&#34;:&#34;xxx&#34;, &#34;pagesize&#34;:&#34;xxx&#34;, &#34;pg&#34;:&#34;xxx&#34;, &#34;param&#34;:&#39;{&#34;xxx&#34;:&#34;xxxx&#34;}&#39; } # 参数说明 visitor: 用户名 type: 接口数据集ID stamp: 时间戳(1970年1月1日到生成时间的毫秒数) token: 采用sha1加密, token=SHA1(秘钥 + stamp + Visitor + Type) Pagesize: 采用分页，每页的数据量大小 pg: 返回第几页 param: 传入的参数值，格式json字符串，如多个参数 &#39;{&#34;参数A&#34;:&#34;xxxx&#34;, &#34;参数B&#34;:&#34;xxxx&#34;}&#39; #接口返回格式 Json: { &#34;data&#34;:[[]], &#34;result&#34;:&#34;success&#34;, &#34;maxpg&#34;:xxx, #最大页数 &#34;pg&#34;:xx, #当前页数 &#34;casheflag&#34;: xx, #如果是999说明命中缓存 &#34;total&#34;:xx, #总条数 } 注意： 只有post是分页的, 第一页是带标题的， 后面页不带标题 由于post方式会使用缓存进行分页,如命中缓存传参不会生效，小数据量请使用get方式请求 不要请求大数据量，大量数据请采用limit, offset传参方式进行分页

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%A4%87%E4%BB%BD%E6%81%A2%E5%A4%8D%E5%8F%8A%E7%89%88%E6%9C%AC/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%A4%87%E4%BB%BD%E6%81%A2%E5%A4%8D%E5%8F%8A%E7%89%88%E6%9C%AC/
应用场景 # 本地仪表盘的备份恢复，版本管理 开发测试生产机之间的同步 具体使用方法请观看视屏 版本控制使用说明视屏 使用方法 # 快速备份 # 可以在模板-&gt;点击如下图标， 完成快速备份（注意会覆盖历史）， 备份号统一为：SNAPSHOT 指定备份 # 你也可以在设定-&gt;备份恢复 中进行按版本备份 查询备份 # 当不输入KEY值， 点击 本地备份时，可以查询此仪表盘已有的备份 备份恢复 # 备份可以在任意的仪表盘中进行恢复，如果是当前仪表盘， 仅输入KEY即可，比如：V01, 如果是跨仪表盘恢复， KEY需要带上仪表盘的编号如13_V01 备份恢复参数说明 # 可以支持多种恢复模式, 只需要在KEY前面加上前缀即可， 如FORCEV01, FORCE13_V01.. FORCE: 删除自身所有数据集及高级设定，模板等，完全恢复备份 DATASET：只更新数据集及图形,模板，适用于测试上线正式 CHART: 只更新图形及模板，适用于前端变更上线 跨服务器间同步 # 具体方法购买专业版本后提供 使用以下流程, 可以使企业在使用最少资源做出最专业的可视化项目 # 前提条件: # 公司内部有技术人员(熟悉数据, 会写SQL) 服务器安装smartchart专业版 开发流程: # 由于公司内部人员是对业务最熟悉, 一般也都是后台数据管理相关的人员, 一般不太会有专职的前端开发和UI 所以数据开发人员可以使用smartchart开发仪表盘数据集, 并使用拖拽功能完成一个粗糙一点的框架和图形设计 一般情况下已经可以满足数据可视化的需求 如果需要达到更专业的可视化效果, 可以外包前端/UI或在smartchart社区咨询, 由于需求变得非常简单 而前端开发又是一个通用技能, 可以使用非常廉价的费用获得最大的效果 专业的事情专业来做, 才能达到效益最大化, 这是smartchart的设计理念 不管用什么工具, 在同等资源的投入下, 数据分析人员开发的可视化效果很难达到专业前端UI的效果 另外BI/数据开发人员的费用可是比前端高的, 也更稀缺

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E4%B8%8B%E8%BD%BD/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E4%B8%8B%E8%BD%BD/
应用场景: # 需要要下载数据集的数据到本地 样例: # 可在&quot;模板&quot; 中新建一个下载按钮, 并指定一个ID,如id_down1, 拖拽到你需要的位置 在任意一个图形开发或js代码段中加入以下代码即可 $(&#39;#id_down1&#39;).click(()=&gt;{ ds_download(&#39;报表数据.csv&#39;, dataset); }); 这样就可以实现点击按钮下载数据了 仅需要录活使用ds_download这个函数, 你可以开发出非常个性化的下载功能 ds_download(name, dataset) 参数说明: name: 文件名称 dataset: 可以是二维数组也可以是字符串

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E5%A1%AB%E6%8A%A5/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E5%A1%AB%E6%8A%A5/
应用场景 # 收集用户端录入的数据 前端处理好的数据回写到任意系统 制做问卷系统 埋点应用 使用方法 # 新建数据集设定,格式如下: 只用指定表名 dataset={ &#34;table&#34;:&#34;表名&#34; } 你也可以指定字段, 比如 dataset={ &#34;table&#34;:&#34;表名(字段1, 字段2)&#34; } 在&quot;容器&quot;管理, 取消这个数据集激活, 并记录下来此数据集的ID, 比如132 在&quot;模板&quot;中编写录入组件代码, 具体可参考视屏 &lt;h1 class=&#34;smtdrag&#34; id=&#34;id_1648895680659&#34;&gt;数据填报&lt;/h1&gt; &lt;div class=&#34;smtdrag&#34; id=&#34;id_1648895855760&#34;&gt; &lt;label&gt;用户&lt;/label&gt;&lt;input id=&#34;id_visitor&#34;&gt; &lt;/div&gt; &lt;div class=&#34;smtdrag&#34; id=&#34;id_1648895859160&#34;&gt; &lt;label&gt;动作&lt;/label&gt;&lt;input id=&#34;id_action&#34;&gt; &lt;/div&gt; &lt;div class=&#34;smtdrag&#34; id=&#34;id_1648895956207&#34;&gt; &lt;button id=&#34;idbtn01&#34;&gt;提交&lt;/button&gt; &lt;/div&gt; 在&quot;模板&quot; 中编写JS代码 $(&#39;#idbtn01&#39;).click(function(){ let visitor = $(&#39;#id_visitor&#39;).val(); let action = $(&#39;#id_action&#39;).val(); let dataset = [visitor, action]; print(ds_save(132, dataset)); //132数据集ID, dataset要写入的数据 }) 更多关于写入数据库的数据集格式说明 # 只写入一行数据, 样列如下: dataset = [&#39;a&#39;,&#39;b&#39;] 同时写入多行数据: dataset = [[], [&#39;a1&#39;,&#39;b1&#39;],[&#39;a2&#39;, &#39;b2]] 如果需要自动记录写入者用户名: dataset = [&#39;$username&#39;, &#39;b&#39;] mongodb写入方式

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A6%96%E9%A1%B5/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A6%96%E9%A1%B5/
应用场景 # 需要用户打开首页时直接查看相应报表 自定义人性化的首页显示 使用方法 # 如果已经有开发好的仪表盘页面, 可以找到它的访问url, 如:/echart/?type=2 设置系统环境变量 SMC_HOME_PAGE=/echart/?type=2 如果你使用django部署, 也可以采用在setting.py中加入配置: SMC_HOME_PAGE=&#39;/echart/?type=2&#39; 这样就可以在首页直接显示设定好的页面了

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%90%8E%E5%8F%B0API%E5%88%B7%E6%96%B0/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%90%8E%E5%8F%B0API%E5%88%B7%E6%96%B0/
应用场景 # 有ETL流程，需要等待后台数据刷新完成后，再触发仪表盘的刷新，数据未完成刷新，仪表盘不刷新 针对有一些耗时的查询, 虽然smartchart有缓存加速, 但是在第一次刷新时可能不能达到极速 用户需要随时都能体验到极速的打开效果 使用后台API刷新，建意将仪表盘中数据集的缓存时间设置长一些，比如2天（2880分钟） 后台数据主动刷新接口 # (购买专业版本后支持) 你需要在setting.py中设定API_TOKEN API_TOKEN = &#39;xxxxxxxx&#39; 找到你要刷新的仪表盘编码, 你可以在打开的仪表盘url上面找到这个type id 后台访问如下api url即可 http://ip:端口/echart/refresh_ds/?type=你的报表ID&amp;token=你设定的API_TOKEN 关于定时刷新 # 为保持产品的轻量化及坚持专业的产品做专业的事情, 归一化统一化的架构设计, 我们不会集成相关调度系统, 一般我们推荐使用您自有的调度工具或平台, 如airflow, 我们也有相关的配套产品 如果您仅仅是简单应用, 也无需使用专用调度来增加运维复杂度, 可以使用linux自带的即可 新建一个sh文件, 假设目录在/data/smartchart vim refresh_smartchart.sh 写入需要刷新的脚本 echo start refresh $(date &#34;+%Y-%m-%d %H:%M:%S&#34;) curl http://ip:端口/echart/?type=你的报表ID1&amp;token=你设定的API_TOKEN curl http://ip:端口/echart/?type=你的报表ID2&amp;token=你设定的API_TOKEN echo end refresh $(date &#34;+%Y-%m-%d %H:%M:%S&#34;) 如果你的网址是https, 可如下方法使用curl curl -k --insecure &#34;https://www.baidu.com” 修改为可执行文件 chmod 775 refresh_smartchart.sh 使用crontab来定时执行 # 编辑crontab crontab -e # 比如需要每天晚上5点10分执行 10 5 * * * /data/smartchart/refresh_smartchart.

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/webSocket%E6%96%B9%E5%BC%8F/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/webSocket%E6%96%B9%E5%BC%8F/
应用场景 # 对于实时程度要求比较高的情况下, 如果你后端已有实现websocket的接口, smartchart也可以很方便的接入 参考以下步骤即可 在&quot;模板&quot;中定义一个全局变量, 如ws_data 编写连接和接收代码段逻辑 在接收代码段加入ds_refresh, 如要刷新0号图形, 则加入ds_refresh(0) 在&quot;高级&quot;设定中加入共享数据集设定, 把ws_data映射到0号图形即可 代码段参考 # let ws_data = [[&#39;初始化&#39;,&#39;V&#39;],[&#39;A&#39;,&#39;2&#39;]]; let ws = null; if(&#39;webSocket&#39; in window){ print(&#39;支持webSocket&#39;); ws = new webSocket(&#39;ws://127.0.0.1:2222/abc&#39;); //连接成功 ws.onopen = function(){ print(&#39;ws连接成功&#39;); } //接收消息 ws.onmessage = function(evt){ ws_data = evt.data; ds_refresh(0); } } else{ print(&#39;浏览器不支持ws&#39;) }