Flask JSONDash 开发者指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00619/article/details/146587564

Flask JSONDash 开发者指南

flask_jsondash :snake: :bar_chart: :chart_with_upwards_trend: Build complex dashboards without any front-end code. Use your own endpoints. JSON config only. Ready to go. 项目地址: https://gitcode.com/gh_mirrors/fl/flask_jsondash

1. 项目介绍

Flask JSONDash 是一个基于 Flask 的开源项目，它允许开发者通过简单的 JSON 配置来创建无需编写前端（或后端）代码的优雅仪表板。该项目利用流行的图表库如 C3.js 和 D3.js，使得创建复杂的数据可视化和仪表板变得轻而易举。

2. 项目快速启动

环境准备

确保你的系统中已经安装了 Python 和 pip。以下步骤将在虚拟环境中安装 Flask JSONDash。

# 克隆项目
git clone https://github.com/christabor/flask_jsondash.git

# 进入项目目录
cd flask_jsondash

# 创建虚拟环境并激活
virtualenv env
source env/bin/activate

# 安装 Flask JSONDash
python setup.py install

# 进入示例应用目录
cd example_app

# 运行应用
python app.py

应用启动后，你可以在浏览器中访问 http://localhost:8080 查看仪表板。

配置数据库

确保以下环境变量已经设置：

CHARTS_DB_HOST: 数据库服务器主机名（默认为 'localhost'）
CHARTS_DB_PORT: 数据库服务器端口（默认为 27017）
CHARTS_DB_NAME: 数据库名称（默认为 'charts'）
CHARTS_DB_TABLE: 数据库集合名称（默认为 'views'）
CHARTS_ACTIVE_DB: 数据库后端类型 - 选项：'mongo'（默认）

启动 MongoDB 数据库：

mongod

确保 MongoDB 集合已创建，并在环境变量中指定。

3. 应用案例和最佳实践

创建自定义仪表板

你可以通过编辑 examples/config 目录中的 JSON 文件来自定义仪表板。以下是一个简单的 JSON 配置示例：

{
  "modules": [
    {
      "type": "timeseries",
      "name": "name3",
      "width": 510,
      "height": 400,
      "dataSource": "http://localhost:5001/test1",
      "order": 0
    }
  ]
}

将此 JSON 文件的内容复制到仪表板的“编辑原始 JSON”选项中，以查看实时效果。

使用自定义输入

你可以为每个图表提供自定义输入，从而实现图表的交互性。以下是一个带有自定义输入的 JSON 配置示例：

{
  "modules": [
    {
      "name": "line",
      "height": "400",
      "width": "500",
      "dataSource": "http://127.0.0.1:5004/custom-inputs",
      "override": false,
      "guid": "a6eb10e7-26fa-7814-818a-3699b24415c5",
      "type": "line",
      "inputs": {
        "btn_classes": ["btn", "btn-info", "btn-sm"],
        "submit_text": "Submit",
        "options": [
          {
            "type": "number",
            "name": "entries",
            "input_classes": ["form-control", "input-sm"],
            "label": "Number of points",
            "help_text": "Change the number of points per entry shown"
          }
        ]
      }
    }
  ]
}

在这个例子中，用户可以通过输入字段改变图表显示的数据点数量。