SmartChart配合Django的安装与使用

SmartChart的Git地址：https://gitee.com/smartchart/smartchart

在这里我只能说一句话 SmartChart开发团队真厉害

配合Django来使用SmartChart

安装smartchart，Python版本>=3.6，Django>=2.0
SmartChart和我们的admin是有关联的，我们可以通过下载一个UI库去美化我们admin页面这个UI库就是simpleui

# 安装smartchart
pip install smartchart
# 安装simpleui 
pip install simpleui 

安装完成后需要去git上面拉取模版以及静态文件
地址：https://github.com/JohnYan2017/SmartCharts

# 对应的项目目录说明:

templates/echart   -- 编辑器界面
templates/index    -- 首页Portal
static/echart         -- 扩展前端数据处理函数(图形编辑中可用)
static/editor         -- 编辑器界面js
static/index          -- Portal对应js, css
static/custom       -- 你可以在此新建人个文件夹存放自定义css, js, image ..

Django项目中settings,py配置

# settings,py
INSTALLED_APPS = [
    'simpleui',  # 在导入初始化admin之前导入UI库进行页面的美化
    'xxxxx',
    'xxxx',
    'xxx',
    'smart_chart.echart',   # 注册app
]

# 注释调MIDDLEWARE里面的
django.middleware.clickjacking.XFrameOptionsMiddleware

# 更改时区配置
LANGUAGE_CODE = 'zh-Hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

# 指定静态文件
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

## 若是注册了 simpleui 这个样式库，同时也创建了一个仪表盘，这时候我们想把某个仪表盘放到我们admin的首页就需要以下配置（用到时候打开）
# SIMPLEUI_HOME_PAGE = '/echart/?type=大数据李白'  # type=的是仪表盘名称，这个是自定义的，能和仪表盘名称对应上去就行

在urls.py注册路由

# urls.py
from django.urls import include  # 导入include
from django.views.generic import RedirectView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('echart/',include('smart_chart.echart.urls')),  # 注册一个图表的路由
    path('',RedirectView.as_view(url='echart/index/')),  # 跳转到chart的首页
]

迁移及创建超级管理员

# 首先生成迁移文件并迁移
python manage.py makemigrations 
python manage.py mifrate
# 创创建超级管理员
python manage.py createsuperuser

# 运行Django项目，访问一下 下面这条路由进行数据初始化
http://127.0.0.1:8000/echart/init_db/

# 到此已经完成一个SmartChart项目的创建

创建仪表盘

到这里的时候小伙伴们都应该知道仪表盘是个什么东西了,不做过多介绍，SmartChart开发团队真厉害。
可能会有地方需要激活码，这个激活码直接加群就可以获取

初始化完成后会进入首页，点击下图小人图标或者另一个进入开发者模式

点击我的关注，新增一个仪表盘。 注：一定要在开发者模式下进行

进入新增仪表盘详情页

箭头所指，归属项目 默认连接 可以自己创建一个归属的项目，并创建一个数据库的一个链接，支持多种数据库连接 。数据库类型,如mysql,oracle,impala,gp,mssql,hive,redis,sqlite,python

创建完成后我们就会发现，在仪表盘的表中多出了一条数据，就是我们刚刚创建那条

点击进入仪表盘的图表页

样式及数据

边框设计

多种边框样式提供选择 SmartChart集成DataV

// 边框样式  dv-border-box-  后面跟的数字就是选择样式的类型
// 可根据上方  SmartChart集成DataV 进行参考一共十三个
<div class="col-xs-12 col-md-6" style="padding:0 0;height:50%;" >
  <dv-border-box-11>
   <div style="height:100%;padding:0.5% 0.5%;" id="container_{name}"></div>
 </dv-border-box-11>
</div>

设置联动

smartChart 设置联动，是需要通过SQL语句来设置，这个下面详细介绍

联动是使用的sql语句接收的参数，这个sql语句是要写在需要被联动的图表数据集中
/* where age='$age' */ 该语句中的 $至关重要切记勿忘

想要联动的话，必须打开 "dv" 模式 也就是在高级中设置 {"dv":1}, 并根据下面语句进行联动配置

上图有个画框的的参数 data[2]这个的获取，就在网页的开发者模式 F12 点击Conlose再点击数据，会有打印的数据信息，我们找到data所拥有的数据。配置完成后，就可以联动了，也可以双向联动，这个同理，反过来配置就行了。

优点

• 图表类型多，外观炫酷
• 支持自定义数据，对数据的结构要求严格，格式必须统一
• 支持mysql,oracle,impala,gp,mssql,hive,redis,sqlite等主流数据库
• 支持自定义访问接口，如GET、POST请求
• 支持各图表的，智能联动，可以通过SQL配合设定
• 配置简单，上手快，但是没有精确的技术文档