Axis笔记

外观

3.2 图表配置

约 625 字

面板数据

本页对应「三、操作步骤」的 3.2，按“总量 → 趋势 → 明细”的顺序配置图表，明确每个指标的取数方式、时间粒度与空值处理。返回上级：可视化面板。

前置条件

  • 3.1 已生成 summary.json，字段与时间粒度稳定。
  • 已确定面板要回答的问题，例如“今天是否异常”“错误率在升高还是下降”。
  • 前端组件库与图表库已随站点依赖安装，无需在页面内引入外部脚本。

操作步骤

  1. 先定义指标口径，写成配置而不是散落在代码里：
cat > /srv/axis/data/charts.json <<'EOF'
[
  {"id":"total","title":"当日请求量","type":"stat","field":"requests","agg":"sum"},
  {"id":"error_rate","title":"错误率","type":"stat","field":"errors","agg":"rate"},
  {"id":"trend","title":"7 天趋势","type":"line","field":"requests","agg":"sum","granularity":"day"},
  {"id":"paths","title":"热门路径","type":"bar","field":"path","agg":"count","limit":10}
]
EOF
jq -r '.[] | "\(.id)\t\(.type)\t\(.agg)"' /srv/axis/data/charts.json
  1. 用脚本验证数据能算出每个指标，先算总量与错误率：
jq -r '[.hours[].requests] | add' /srv/axis/data/summary.json
jq -r '([.hours[].errors] | add) / ([.hours[].requests] | add) * 100' \
  /srv/axis/data/summary.json
  1. 趋势图按天聚合，确认缺失日期用 0 补齐而不是跳过：
jq -r '.hours | map({day: (.hour[0:10]), requests}) | group_by(.day)
  | map({day: .[0].day, requests: (map(.requests) | add)})[] | @tsv' \
  /srv/axis/data/summary.json
  1. 明细图表限制条数与排序，避免一次渲染过多数据：
jq -r '.hours | sort_by(.errors) | reverse | .[:5][] | "\(.hour)\t\(.errors)"' \
  /srv/axis/data/summary.json

结果确认

  • 每个图表的 field 都能在数据文件中找到，未出现空数据。
  • 总量与错误率的计算结果与手工核对一致，单位与小数位固定。
  • 趋势图横轴连续，缺失时间点为 0，没有跳过日期。
  • 明细图表最多展示 10 条，按数值倒序，长文本已截断。

注意事项

  • 同一页面内所有图表使用同一时间范围，否则对比会失真。
  • 统计口径写进配置并随面板一起发布，改口径要同时标注生效时间。
  • 图表不要直接请求原始日志，数据量增大后会拖慢页面。
  • 空数据要有明确占位，显示 0 与显示“暂无数据”含义不同，不能混用。
  • 数值单位写在标题或轴标签上，只写数字会让人误读为百分比或毫秒。
  • 图表配色不超过五种，超过后图例失去区分度，读者只会记住最亮的那一条。