Just-Dashboard 数据可视化仪表盘快速入门教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00619/article/details/148988134

Just-Dashboard 数据可视化仪表盘快速入门教程

项目概述

Just-Dashboard 是一个基于 YAML/JSON 的声明式数据可视化工具，它允许开发者通过简单的配置文件快速创建交互式数据仪表盘。该项目采用"配置即代码"的理念，将数据可视化元素抽象为可组合的组件，大大简化了仪表盘的开发流程。

核心特性

声明式配置：使用 YAML 或 JSON 格式定义仪表盘布局和内容
组件化设计：内置多种可视化组件（图表、文本、布局等）
动态数据：支持从外部数据源加载和转换数据
交互功能：提供变量和下拉菜单等交互元素

快速开始

基础仪表盘创建

创建一个简单的食物营养成分对比仪表盘：

dashboard "Food":
  - h1 text: Food
  - h2 text: By caloric content
  - 3 columns:
    - rows:
      - h3 text: Bananas
      - pie chart: {
          "columns": [
            ["Protein", 5], ["Sugar", 10], ["Other carbs", 40], ["Fat", 1]
          ]
        }
    - rows:
      - h3 text: Tofu
      - pie chart: {
          "columns": [
            ["Protein", 30], ["Sugar", 0], ["Other carbs", 40], ["Fat", 3]
          ]
        }
    - rows:
      - h3 text: Peanut butter
      - pie chart: {
          "columns": [
            ["Protein", 20], ["Sugar", 2], ["Other carbs", 20], ["Fat", 50]
          ]
        }

这个配置会生成一个三列布局的仪表盘，每列展示一种食物的营养成分饼图。

数据与展示分离

Just-Dashboard 支持将数据与展示逻辑分离，便于维护和重用：

首先创建独立的数据文件（JSON 格式）：

{
  "Bananas": [["Protein", 5], ["Sugar", 10], ["Other carbs", 40], ["Fat", 1]],
  "Tofu": [["Protein", 30], ["Sugar", 0], ["Other carbs", 40], ["Fat", 3]],
  "Peanut butter": [["Protein", 20], ["Sugar", 2], ["Other carbs", 20], ["Fat", 50]]
}

然后在仪表盘配置中引用并转换这些数据：

dashboard "Food":
  - h1 text: Food
  - h2 text: By caloric content
  - 3 columns:
    - attr:query: '[to_entries | .[] | {"component": "rows", "data": [
      {"component": "text", "args": {"tagName": "h3"}, "data": .key},
      {"component": "chart", "args": {"type": "pie"}, "data": {"columns": .value}}
    ]}]'
    - data: https://example.com/path/to/nutri.json

这里使用了 jq 查询语法来转换数据格式，实现了与手动编写相同的可视化效果。

高级功能

交互式变量

Just-Dashboard 支持通过变量创建交互式仪表盘。以下示例展示了如何使用下拉菜单选择要展示的营养成分：

dashboard "Food":
  - h1 text: Food
  - dropdown macro=Protein:
    - {"value": "Protein", "text": "Protein"}
    - {"value": "Fat", "text": "Fat"}
    - {"value": "Sugar", "text": "Sugar"}
    - {"value": "Other carbs", "text": "Other carbs"}
  - h2 text: By ${macro} content
  - bar chart:
    - attr:query: '{"columns": [to_entries | .[] | [.key, (.value | .[] | select(.[0] == "${macro}"))[1] ]]}'
    - data: https://example.com/path/to/nutri.json

这个配置会生成一个带有下拉菜单的仪表盘，用户可以选择不同的营养成分来动态更新柱状图。

自定义后端集成

如果需要更复杂的数据处理或认证功能，可以集成到自己的后端系统中：

安装 Just-Dashboard 包
创建自定义前端

示例代码：

import { json_parser, yaml_parser } from 'just-dashboard'
import * as d3 from 'd3'

// 从自定义后端加载数据
const dashboard_yaml = await fetch('/api/dashboard-config').then(res => res.text())
const dashboard = yaml_parser(dashboard_yaml)

// 创建渲染函数
const render_dashboard = json_parser(dashboard)

// 渲染仪表盘到页面
render_dashboard(d3.select("body"))