JSON配置

文档概述

本帮助文档详细说明自定义图表JSON配置中各字段的含义和用法。JSON配置采用对象数组结构，每个对象代表一个图表或配置项。以下表格详细列出了所有可配置字段及其属性。

点击 JSON 切换到JSON编辑模式

JSON配置结构

基本规则

JSON配置是一个数组，包含两种类型的元素：

图表分组配置（非必需）

{
  "group": "节点",  // 分组标识
  "config": {
    "selector": ["namespaces"],  // 该分组使用的选择器
    "active": true,  // 是否默认选中展示
    "defaultThemes": {  // 默认主题配置
      "theme.name": { ... }
    }
  }
}

图表配置（有chart字段）

{
  "group": "节点",      // 所属分组
  "chart": "stat",         // 图表类型
  "title": "节点数量",     // 图表标题
  "width": 4,             // 宽度（栅格系统，总宽12）
  "height": 250,          // 高度（像素，-1表示自适应）
  "query": "...",         // 查询语句
  "config": { ... }       // 图表特定配置
}

主要字段说明

通用字段

字段名	类型	必填	默认值	说明	示例
group	字符串	是	-	图表所属的分组名称，用于界面分类	"通用", "CPU详情", "JVM"
chart	字符串	是	-	图表类型标识符	请参见《图表示例》文档。
title	字符串	是	-	图表显示标题	"CPU 使用量", "内存使用率"
width	整数	否	-	图表宽度（基于12列网格系统）	1～12: 6（半宽）, 12（全宽）
height	整数	否	自动	图表高度（像素），部分图表类型专用	200, 130
tags	字符串数组	否	[]	标签数组，用于筛选和分类	["pod"], ["内存", "JVM"]

数据查询字段

配置字段（config）

视觉样式字段

TOP图表专用字段（top对象）

组合图表专用字段（group图表类型）

预定义主题配置（defaultThemes）

变量模板系统

图表类型对照表

单位类型参考

颜色系统参考

配置示例片段

状态图配置(stat)

{
  "chart": "stat",
  "title": "告警 致命",
  "width": 6,
  "height": 200,
  "query_range": "count (ALERTS{namespace=~'${namespace}',severity='critical',alertstate='firing'})  or vector(0)",
  "unit": "",
  "config": {
    "state.color": "#dc3545"
  }
}

仪表盘配置(gauge)

{
  "group": "node",
  "chart": "gauge",
  "title": "平均CPU使用率",
  "width": 3,
  "height": 250,
  "query": "sum(cc_node_cpu_used{node=~'${node}'})/sum(cc_node_cpu_total{node=~'${node}'})",
  "unit": "Percent(0-1)",
  "config": {
    "theme": "gauge.width3"
  }
},

柱状图配置(bar)

{
  "group": "node",
  "chart": "bar",
  "title": "节点当前Pod数量",
  "width": 6,
  "query": "(sum by(node, phase)((kube_pod_status_phase>0)*on(namespace, pod)group_left(node)kube_pod_info{node=~'${node}'}))or(label_replace(max by(node)(kube_node_status_allocatable{node=~'${node}',resource='pods'})-sum by(node)((kube_pod_status_phase{phase=~'Pending|Running'}>0)*on(namespace,pod)group_left(node)kube_pod_info{node=~'${node}'}),'phase','idle','',''))",
  "config": {
    "theme": "bar.stack",
    "colorMap": {
      "Running": "${primary}",
      "Succeeded": "${success}",
      "Pending": "${warning}",
      "Failed": "${danger}",
      "idle": "${primary-bg-subtle}"
    },
    "seriesSort": {
      "phase": [
        "Pending",
        "Running",
        "Succeeded",
        "Failed",
        "idle"
      ]
    },
    "xAxis": "node",
    "yAxis": "value",
    "series": "phase",
    "asc": "${node}-${phase}"
  }
}

旭日图(sunburst)

{
  "id": "node-001",
  "tags": [],
  "group": "node",
  "chart": "sunburst",
  "title": "节点健康状态",
  "width": 6,
  "query": "sum by(node, state)((label_replace((up{job='kubelet',metrics_path='/metrics',node=~'${node}'} == 0) + 1, 'state', 'unknown', '', '')))or on(node)(sum by(node,state)(label_replace(kube_node_status_condition{condition='Ready',status='true',node=~'${node}'} == 1,'state', 'ready', '', '')or label_replace(kube_node_status_condition{condition='Ready',status='false',node=~'${node}'} == 1,'state', 'notReady', '', '')or label_replace(kube_node_status_condition{condition!='Ready',status='true',node=~'${node}'} == 1,'state', '$1', 'condition', '(.+)')))",
  "unit": "",
  "config": {
    "levels": [
      "state",
      "node"
    ]
  }
}

饼图配置(pie)

{
  "group": "node",
  "chart": "pie",
  "title": "CPU 总量",
  "width": 4,
  "query": "max by(node)(cc_node_cpu_total{node=~'${node}'})",
  "unit": "核",
  "config": {
    "theme": "pie.rose",
    "tooltip": {
      "formatter": "${node}",
      "axisFormatter": "${timestamp}"
    },
    "asc": "${node}"
  }
}

折线图配置(line)

{
  "group": "通用",
  "chart": "line",
  "title": "CPU 使用量",
  "width": 6,
  "query_range": "max by(node,pod)(cc_pod_cpu_used{node=~'${node}',namespace=~'${namespace}',pod=~'${pod}',workload=~'${workload}'})",
  "unit": "核",
  "config": {
    "legend": {
      "formatter": "${pod}"
    },
    "tooltip": {
      "formatter": "${pod} (${node})"
    },
    "asc": "${pod}"
  }
}

Top配置(top)

{
  "group": "CPU详情",
  "chart": "top",
  "title": "CPU使用总时间",
  "width": 4,
  "query": "sum by(node, namespace, pod)(irate(container_cpu_usage_seconds_total{namespace=~'${namespace}',pod=~'${pod}',pod=~'${podPattern}',image!='',job='kubelet',metrics_path='/metrics/cadvisor'}[5m]))",
  "unit": "核",
  "config": {
    "description": "<code>container_cpu_usage_seconds_total</code>，该指标表示容器在所有CPU模式下(用户态+内核态)消耗的总CPU时间(秒)。这是评估容器CPU使用情况的综合指标，可以反映容器的工作负载强度。"
  },
  "top": {
    "columns": [
      {
        "title": "pod",
        "metric": "pod"
      },
      {
        "title": "node",
        "metric": "node"
      },
      {
        "title": "CPU使用总时间",
        "value": 1,
        "sort": "pod",
        "defaultSort": "desc",
        "unit": "核"
      }
    ],
    "color": [
      "#22D3AC"
    ]
  }
}

主题定义配置

{
  "group": "通用",
  "config": {
    "selector": [],
    "defaultThemes": {
      "tooltip.enterable": {
        "tooltip": {
          "enterable": true,
          "extraCssText": "max-height: 600px; overflow-y: auto;"
        }
      },
      "line.right250": {
        "grid": {
          "top": 5,
          "left": 0,
          "right": 250,
          "bottom": 0
        },
        "legend": {
          "orient": "vertical",
          "left": null,
          "right": 0,
          "textStyle": {
            "width": 220
          }
        },
        "tooltip": {
          "enterable": true,
          "extraCssText": "max-height: 600px; overflow-y: auto;"
        }
      }
    }
  }
}

通过以上字段说明，您可以系统地理解JSON配置中各部分的作用，从而创建出符合需求的自定义图表。建议从简单配置开始，逐步尝试高级特性，以达到最佳的可视化效果。