分类目录归档:smartchart

SMARTCHART数据集之外部数据API


SmartChart 数据集获取数据的方式可以使用SQL查询数据库, 可以直接从EXCEL贴入数据, 可以读取Redis, 可以使用Pandas处理文件数据, 这在应用中还不足够

我们当然也支持对接外部API取数, 注意返回一定要是JSON格式

最简单的方式, 你可以直接在数据集编辑中写入url即可, 默认会将此url替换前端的查询
https://www.smartchart.cn/smartdata/api/?i=loaddataset1&j=1

但这种方法有一定的缺点:

  1. 只支持GET方法
  2. API完全暴露, 无权限控制
  3. 没有缓存功能, 当API未做优化处理时, 速度慢
  4. 可...

Read more

复制仪表盘


好不容易开发好了一个仪表盘, 想再做一个类似的, 或者想要一个测试用, 还需要一个个数据集, 图形复制粘贴么, 不, 你仅仅只需要点击下, 将给你复制出一个全新的仪表盘

注意: 复制出来的仪表盘, 数据集是与原仪表盘公用的

如果你想将数据集独立出来, 可以按下图操作, 进入DIV设定, 点击磁铁, 将为你自动创建一个全新的数据集

Read more

SmartChart数据集之Pandas


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

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

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

#读取excel
import pandas as pd
d...

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