SMARTCHART使用指南


SmartChart designed for you

SmartChart是为你而生的一个产品, 你只需要使用通用开发技术就可以使用,无需学习特定的技能, 因为她的通用性, 所以让你的知识不会因为改变而淘汰

因为她的灵活性, 你可以充分发挥你的智慧让她变得非常的smart

抛弃繁琐的操作, 加速你的开发效率, 和BI产品相比, 如同Linux与Window的区别

她是一个数据集装箱, 让你非常方便的把数据组装起来后, 可使用统一的接口对外服务,支持系统间嵌入,实时,快速定制化开发. 你也可以理解为数据中台, 用可视化提供统一数据服务. 这是一个面向开发人员的平台, 实现数据的最后一公里...

Read more

SmartChart点击响应指南


你可能会有这样一个需求, 当在查看图表时, 发现一个异常点, 需要进一步看它的详细, 或跳转到 另一个网页进行操作, 可以使用smartchart的动作响应功能

首先进入"图形在线调式"中, 在代码最下方加入以下代码:

myChart__name__.on('click', function (params) {
    console.log(params);
});

然后按F12进入浏览器的调试界面, 尝试点击图形, 你会在浏览器的调试界面中 看到如下响应, 这就是params的参数, 找到你要的数据, 比如我们需要是系列 那就是data[0], data中的第一...

Read more

Tableau嵌入参数设置


URL 参数  值   说明  示例
:alerts no  隐藏嵌入视图中的“通知”按钮。
http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:alerts=no
:customViews    no  “记住我的更改”选项。
http://tabserver/views/Date-Time/DateCalcs?:embed=yes&:customViews=no
:device desktop; tablet; phone  
如果仪表板具有适用于移动设备的布局,则会显示一个特定布局,而不考虑屏幕大小。如果未设...

Read more

SmartChart模板指南


上篇有说明如果使用 "可视化设计" 能实现模板的设计, 一般的应用都能满足. 但是作为开发者来说, 我们需要的是更多的自由度.这好比是Window 和 Liunx, 开发者更爱Linux, 下面就来介绍下SmartChart的模板的自定义用法

布局篇

//一般从可视化工具可以生成以下布局
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-xs-12 col-md-12">
    ...

Read more

SMARTCHART拼接数据


经常会这样的一些需求, 比如一个数据集可能不足以完成一个图形, 这些数据有可能来源不同的系统, 有可能是因为结构不一样, 不合适进行sql拼接, 还有可能这个数据集需要同时应用不同的图形.

其实我们只要灵活应用下smartchart就可以实现了. 首先, 在dashboard的设定中, 选择你的公用数据集及数据集传递专用的公用图形"common.dataset", 如下图: 注意图形所在的序号, 后续在其它图形中的引用就是data_序号, 这个就是data_0. 另外"DIV格式"留空, 这样就是一个纯净的数据集了. 由于公用的数据集需要提前加载, 所以请尽量把它们的顺序排在最前面

...

Read more

SMARTCHART钻取功能指南


数据集准备

首先在需要进行钻取的数据集中SQL的写法如下, 比如对应2号图形:

注意 /* ... */的写法, 当参数写在这个区间时, 如果外部没有传入参数, 
会自动忽略这一段代码, 这样对于钻取来说非常重要, 
初始时全部显示, 点击其它图形时传入参数进行动态钻取

select xxx,xxx,xxx from tablename /* where xxxx = '$参数名' */ ....

常规方法

在dashboard设定中的 高级 --> 扩展参数,点击"加载样式", 自动下载样式, 进行如下配置, 这样就可以实现当1号图形点击时,对2号图形进行钻取...

Read more

SMARTCHART图形联动


简单的实现方式

要实现图形的联动效果, 首先我们得需要图形之间的数据的维度至少有一个维度是相同的

//首先我们假设有一个这样的数据集:
[
 ['product', 'A', 'B', 'C', 'D', 'E', 'F'],
 ['2017', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
 ['2018', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
 ['2019',...

Read more

SMARTCHART实现筛选器


通用实现方式

SMARTCHART实现筛选最简单的方法只需要配一个控件即可:

//建立一个筛选清单数据集, 并指定一个参数名, 比如city, 那么可以这么写
 Select xxxx as city from tablename..... 注意将数据集设定中的"带头部"选上,
 则会生成一个如下的数据集: 
 [['city'],[选项1],[选项2],..]

//那么在图形展示所使用的数据集中, 需要使用 这个city做为参数写查询, 比如:
select xx, xx, xx from tablename where xx = '$ci...

Read more