分类目录归档:smartchart

SMARTCHART使用指南


SmartChart designed for you

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

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

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

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

Read more

ECharts 基础概念


Smartchat基于Echarts,所以开发Smartchart,你需要了解下ECharts基础概念

只需要围绕option进行定制设定。echarts 的使用者,使用 option 来描述其对图表的各种需求,包括:有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之,option 表述了:数据、数据如何映射成图形、交互行为。

echarts 实例

一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等(用 option 来描述)。准备一个 DOM 节点(作为 echarts 的渲染容器),就可以在上...

Read more

SmartChart数据集之Pandas


SmartChart数据集可以使用Pandas来做数据处理,完全兼容Pandas语法

df变量名是最终的数据集, 你需要产出它即可

内置函数
#读取数据集
pddf(id,para_dict=None,cachestr=None,columns=None)
df=pddf(359)  #获取ID为359这个数据集的数据并转化为pandas的dataframe(df)
df=pddf(359,columns=['C1','C2','D1']) #可指定标题名称

#读取文件(文件为上传设定中的表名)
pdcsv(tablename,**kwa...

Read more

SMARTCHART动态效果


第一种动态效果: 按系列轮放

参考: 饼图自动播放

设定方法:

  • 如果不改动图形, 可以在"仪表盘" --> 高级设定中 进行

    //动态播放
      "animate":{"2":{"dataLen":5,"interval":1000,"showtip":1}},
  • 以上方法最简单,但有一个弊端, 需要指定dataLen, 有时可能dataLen不固定,这样你可以采用在图形设定的最后加上一段即可:

    //基于数据项动态设定
    startSelectAnimate(myChart__name__,legend_label.length,1000,1);

第二种动态效果: 时间轴模式(当...

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, 如果有出现异常, 请切换浏览器

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

SmartChart快速开发入门


建立数据集

点击"数据集", 如下图, 将你在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" >
<div style="...

Read more