开启SmartChart


现在开始我们的第一个SmartChart, 经过大量的迭代开发后, 目前正确的开启SmartChart的方法来了.考虑到大家可能不会SQL与数据库操作, 现在以从EXCEL中复制数据方式完成Demo

  • 注意excel中准备的数据为结果数据, 你可以采用对原始数据进行透视表操作后生成
  • 我们推荐的开发浏览器是:Chrome, 如果有出现异常, 请切换浏览器

以下说明已发生很大变化, 正确方式请参考视屏

SmartChart快速开发入门


建立数据集

点击"数据集", 如下图, 将你在EXCEL中准备好的数据 复制到"数据集编辑框",在头部输入dataset=,然后分别选择数据源

图形编辑

完成

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中进行布局,可以更快速灵活, 你需要了解boostrap3的布局说明

布局说明

代码参考:
#1
<div class="col-xs-12 col-md-12" >
<div style="he

Read more

SMARTCHART共用数据


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

其实我们只要灵活应用下smartchart就可以实现了. 首先, 将你的数据集名称命名为"common.xxxxx", 即为通用数据集, 通用数据集的图形中只需写为:

data__name__ = __dataset__;

如下图: 注意图形所在的序号, 后续在其它图形中的引用就是data序号, 这个就是data0. 另外"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', 24

Read more

SMARTCHART实现筛选器


通用实现方式

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

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

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

Read more