uPlot 高性能图表库使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00096/article/details/148419075

uPlot 高性能图表库使用指南

uPlot 📈 A small, fast chart for time series, lines, areas, ohlc & bars 项目地址: https://gitcode.com/gh_mirrors/up/uPlot

概述

uPlot 是一个轻量级、高性能的 JavaScript 图表库，特别适合处理大规模时间序列数据的可视化。本文将详细介绍 uPlot 的核心概念、数据格式要求以及各种配置选项的使用方法。

安装与基本使用

uPlot 的安装非常简单，只需引入 CSS 和 JavaScript 文件即可：

<link rel="stylesheet" href="path/to/uPlot.min.css">
<script src="path/to/uPlot.iife.min.js"></script>

数据格式要求

uPlot 采用列式数据结构，要求数据格式如下：

let data = [
  [1546300800, 1546387200],  // x轴值（时间戳）
  [35, 71],                  // 第一个系列y值
  [90, 15]                   // 第二个系列y值
];

数据格式要点

x值要求：
- 必须是数字类型
- 必须唯一且按升序排列
- 默认被解析为Unix时间戳（1970年以来的秒数）
y值要求：
- 必须是数字或null（表示缺失数据）
- 每个系列的数据长度必须与x值数组长度相同
时间戳处理：
- 默认处理秒级时间戳
- 可通过scales.x.time = false禁用时间处理
- 支持毫秒级精度（使用浮点数表示）

数据格式限制

uPlot 的数据格式要求所有系列共享相同的x值，这意味着：

稀疏数据需要用null填充
不同步的数据可能导致数据集膨胀
不适合x值差异大的多系列数据

基础配置

创建图表的基本配置示例如下：

let opts = {
  title: "图表标题",
  width: 800,
  height: 600,
  series: [
    {},  // x轴配置占位
    {
      show: true,            // 初始显示状态
      spanGaps: false,       // 是否连接空值点
      label: "内存使用",      // 图例显示名称
      stroke: "red",         // 线条颜色
      width: 1,             // 线条宽度
      fill: "rgba(255,0,0,0.3)", // 填充颜色
      dash: [10, 5]         // 虚线样式
    }
  ]
};

let chart = new uPlot(opts, data, document.body);

配置说明

尺寸设置：width和height仅包含绘图区域，不包括标题和图例
系列样式：支持所有Canvas绘图属性
空值处理：spanGaps控制是否连接空值点

高级功能

高低带图

高低带图用于显示数据范围区间：

series: [
  {},
  {
    label: "最低值",
    fill: "rgba(0,255,0,0.2)",
    band: true
  },
  {
    label: "最高值",
    fill: "rgba(0,255,0,0.2)",
    band: true
  }
]

多轴系统

uPlot 支持为不同单位的数据创建多个y轴：

series: [
  {},
  {
    label: "CPU",
    scale: "%",  // 使用百分比刻度
    value: v => v?.toFixed(1) + "%"
  },
  {
    label: "网络",
    scale: "mb",  // 使用MB刻度
    value: v => v?.toFixed(2) + "MB"
  }
],
axes: [
  {},
  {
    scale: "%",
    values: ticks => ticks.map(v => v.toFixed(1) + "%")
  },
  {
    scale: "mb",
    side: 1,  // 右侧显示
    grid: {show: false}
  }
]

单位转换轴

支持创建依赖主刻度的辅助轴，用于单位转换：

scales: {
  "C": {
    from: "F",  // 依赖华氏度刻度
    range: (min, max) => [
      (min - 32) * 5/9,  // 转换为摄氏度
      (max - 32) * 5/9
    ]
  }
}

刻度与轴配置

刻度配置

scales: {
  "x": {
    time: false,  // 禁用时间处理
    distr: 2     // 使用等距分布
  },
  "y": {
    auto: false,  // 禁用自动范围
    range: [0, 100]  // 固定范围
  }
}

轴样式配置

axes: [
  {
    label: "人口",
    labelFont: "bold 12px Arial",
    size: 50,  // 轴宽度
    grid: {
      stroke: "#eee",
      width: 2
    },
    ticks: {
      size: 10,  // 刻度长度
      stroke: "#ccc"
    }
  }
]

高级刻度控制

axes: [
  {
    space: 40,  // 最小刻度间距
    incrs: [1, 5, 10, 15, 30, 60],  // 可用刻度间隔
    values: [  // 刻度格式化规则
      [3600*24, "{M}/{D}", "\n{YYYY}"],  // 天级显示
      [3600, "{h}{aa}", "\n{M}/{D}"]     // 小时级显示
    ]
  }
]