分类目录归档:smartchart

SMARTCHART使用指南


SmartChart designed for you

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

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

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

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

Read more

SmartChart的Redis数据源


你可能会有这样的一些需求, 展示数据是要通过外部的程序计算好,如一些实时的计算场景,用spark计算好的数据 或爬虫爬取的数据, 然后写入redis或nosql的数据库,最后由前端图形直接展示或数据下载

SmartChart支持这一块的应用

你可以创建一个redis的连接池, 然后按照通用的方法建立数据集 不同的是, 数据集的SQL区不再是写sql代码, 而只需要写redis中的keyname

如redis中存储的数据是keyname 为 "指标A", 数据 '{"长沙":1,"上海":2}' 这样我们只需要在数据集中写上 指标A 即可, 最后你会得到{"长沙":1,"上海":2}的...

Read more

SmartData数据接口


SmartData借助SmartChart的数据集功能, 可以非常方便的实现数据对外微服务

  • 在"大数据接口" ---> "API设定" 中添加 visitor 和 Token
  • 新建 "数据集" 并授权给 API设定中的 visitor, 这样就完成了
  • 注意: post请求时会缓存数据, 所以请设定一个合理的缓存时间

接口请求方式

GET 请求
#接口请求格式: 
url: /echart/dataset_api/?visitor=xxx&token=xxx&type=xxx 数据集名或id名
#接口返回格式
Json: 
{
"data":[...

Read more

开启SmartChart


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

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

建立数据集

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

图形编辑

完成以上过程后, 点击数据集下方的"保存并继续编辑"的按钮, 这样你会看到数据集...

Read more

SmartChart点击响应指南


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

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

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

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

Read more

SmartChart模板指南


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

布局篇
  • 对于一些简单的布局且有一定基础的朋友, 推荐可不采用自定义模板的方法,在选择"通用模板"后,可直接在DIV中进行布局,可以更快速灵活, 你需要了解boostrap3的布局说明

代码参考:
#1
<div class="col-xs-12 col-md-12" style="height:50%;&...

Read more

SMARTCHART拼接数据


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

其实我们只要灵活应用下smartchart就可以实现了. 首先, 在dashboard的设定中, 选择你的公用数据集及数据集传递专用的公用图形"common.dataset", 注意如果你想要让你的图形数据集成为可以被其它图形引用,你要在图形中这样写

data__name__ = __dataset__;
let data = data__name__;

如下图: 注意图形所在的序号, 后续在其它图...

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