SMARTCHART使用指南


SmartChart designed for you

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

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

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

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

  • 开始使用smart chart, 您不需要任何专业知识, 无需coding, 选择模块组装即可
  • 但如果要使用好smart chart, 建意了解下javascript, H5, Echart这些前端知识, 可以让你的应用更加得心应手,创作更炫的效果
  • 如果你需要更进一步订制你的数据, 你需要了解下SQL的使用,本项目高级应用语言都是通用的技能, 象js, h5,sql 学习成本低

Smart Chart 基础

主要分为 数据连接池, 数据集, 图形格式, 页面模板, 主题, 组装盒(Dashboard)

  • (数据集+图形格式) => 图形(report)
  • (图形report+report+...) + 页面模板 + 主题 => Dashboard

一般企业应用

  • 数据连接池 + 数据集 => 统一数据接口 由 IT(数据建模工程师完成)
  • 图形格式 + 页面模板 + 组装 => 统一可视化接口 由数据分析师或业务完成

开发流程

数据分析师&业务 确定好需求, 进行页面草图设计, 提出数据需求给建模工程师, 完成数据接口后, 数据分析师&业务挑选图形格式(含powerbi, tableau等BI产品), 模板进行组装, 特殊展示需求对相应的code进行修改(js, html)

数据集

数据集可以理解为一个个的cube, 通过sql生成, 支持定时, 点频, 实时刷新的机制, 我们建意你用专业的工具开发sql 查询, 如navicate, hue 数据集的高级用法, 参考如下链接 数据集图形对应关系 对于一般用户来说, 无需了解如何生成数据集, 但建意了解以下数据集的常识 数据集统一向图形传递数据的参数名为dataset, dataset是一个二维表结构, 如下

# 一般情况下, 比如select 时间(row),系列(col),度量
# 当row,col为字符格式时会自动转为如下格式
dataset = [
['时间','人口','发展','潜力'], --表头为系列
['2018年', 12 , 10 , 9],
['2017年', 8  , 7  , 3],
......
]
# 也有select 时间, 度量(人口),度量(发展),度量(潜力)... 的写法

:tw-2649:图形设定

smartchart内置了非常多的图形, 可以直接拿来使用, 但是要定制自已的样式, 建意稍作修改, 比如加上图形, 更改tips, 标题等等, 具体修改方式, 请参考echart文档option 设定 一个标准的option样式, 请对照原生的echart option自行理解:echart样品 你可以参考 自定义图形指南

//__name__ __dataset__ 标识的地方, 这些是传入的参数,注意是两条 _
option__name__  = {  //名字
    legend: {},
    tooltip: {},
    dataset:{source:__dataset__ }, //对应的数据集
    xAxis: {type: 'category'}, 
    yAxis: {},
    series: series   //图形系列
};
charts.push(myChart__name__);

你可以使用我们在线调试工具进行开发图形在线调试

DIV格式, 可以比喻成给图形包一个衣服:

<div id="container_{name}" style="height:100%;""></div>

PowerBI嵌入的也虚拟成了图形格式, 具体方式见另一文章 '请期待'

图形设定是给你的数据穿上衣服, 当然你可以用现成的, 如果你想打扮下, 你也可以自行定制 那接下来我们需要给图形一个舞台, 那就是模板,

:tw-264a:模版

模版就是一个html页面, 理论上来说, 你可以随意发挥, 为了让不太懂html的定制自已的模板, 我们提供了可视化开发模板(期待有人帮忙优化),设计好的code复制过覆盖这一块代码即可, 如有其它需求可自行修改(前提你得稍微会点h5:tw-1f453: :tw-1f43e:), 注意div_list是指所有清单中的图形容器, div_list.0 是指第一个:

<!-- START  这一块是你想改的, 复制过来粘贴即可  -->
<div class="container-fluid">
    <div class="row-fluid">
    <!-- 如果按顺序摆放  -->
        {% for div in div_list %}
          {{div|safe}}
        {% endfor %}
    </div>
</div>
<!--     END    -->

你可以使用 可视化设计工具 进行模板的开发 接下来只需要在dashborad中进行组装就可以了

:tw-26fa:dashboard

选择你需要拼装的数据集,对应的图形,你也可以改定div, 让他更适合当前页面的需求, 选择你要主题, 会自动应用到页面

开始你的组装之旅Smartchart.cn

具体高级用法请大家留言, 在后续的使用说明中会进行细化, 估计以让说明你有点不知如何下手, 下面你可以STEP by STEP 的去尝试