Grafana 的 Plotly 面板

使用 Plotly.js 在 Grafana 中创建高级交互式图表。

主要特性

• 利用完整的 Plotly.js 功能灵活创建图表
• 支持 YAML/JSON，方便配置
• 深色/浅色主题兼容性
• 自动和手动时区调整
• 跨追踪数据应用
• 可展开的代码编辑器，用于定制
• Grafana 变量集成
• 全面错误处理
• 支持多种格式（SVG、PNG、JPEG、WebP）的高分辨率图像导出

有关最新更新的完整列表，请参阅我们的变更日志。

开始使用

由 nLine 开发的 Plotly 面板在 Grafana 中提供了增强的数据可视化控制。它采用基于组件的方法，允许您独立修改图表元素，无需复杂的 JavaScript 交互。

面板结构

面板配置包含五个主要组件

1. allData: 应用于 Plotly 图表上的所有追踪
2. data: 定义图表的数据系列（追踪）
3. layout: 控制图表的外观和轴
4. config: 设置图表范围的选项
5. frames: （可选）用于动画图表

这些组件遵循 Plotly.js 模式。您可以在面板选项中使用 YAML 或 JSON 配置它们。

数据转换

您可以使用自定义脚本在渲染之前转换数据。脚本可以访问：

• data: 来自 Grafana 数据源的原始数据
• variables: Grafana 仪表盘和系统变量
• options: 当前面板配置
• utils: 辅助函数（例如，时区转换，用于日期操作的 dayjs）

上下文变量

脚本可以访问多个上下文变量，这些变量提供有用的信息和功能：

variables

此对象包含 Grafana 的仪表盘变量和原生 Grafana 变量。原生变量优先于同名仪表盘变量。

主要原生变量包括：

• __from 和 __to: 当前时间范围的开始和结束时间戳
• __interval 和 __interval_ms: 间隔的字符串格式（例如，“1h”）和毫秒格式
• __timezone: 当前仪表盘时区
• __timeFilter: 一个生成时间范围过滤表达式的函数
• __dashboard: 当前仪表盘对象

utils

utils 对象提供了多个实用函数和服务，帮助进行数据处理和面板交互：

• timeZone: 仪表盘时区
• dayjs: 一个轻量级日期处理库
• matchTimezone: 一个方便的函数，用于将时间序列数据转换为用户的时区
• locationService: Grafana 用于 URL 操作的位置服务
• getTemplateSrv: Grafana 用于变量替换的模板服务
• replaceVariables: 一个在字符串中替换 Grafana 变量的函数

处理脚本

脚本必须返回一个定义图表配置的对象。此对象可以包含以下一个或多个属性：

• data: 一个追踪对象数组，定义图表的数据系列
• layout: 一个控制图表外观和轴的对象
• config: 一个设置图表范围选项的对象
• frames: 一个帧对象数组，用于动画图表

注意: data 和 frames 属性应该是对象数组。“跨追踪数据”字段可以是一个对象，它会将参数应用于脚本部分返回的所有追踪。对象会与脚本对象合并，脚本对象具有优先级（例如，来自脚本的 data > allData > data）。

脚本在“处理脚本”编辑器中定义。

// Example: Basic timeseries plot
const { data, variables, options, utils } = arguments;
let series = data.series[0];
let x = series.fields[0];
let y = series.fields[1];
return {
data: [
{
x: x.values || x.values.buffer,
y: y.values || y.values.buffer,
type: ‘scatter’,
mode: ’lines’,
name: x.name,
},
],
layout: {
xaxis: { title: x.name },
yaxis: { title: y.name },
},
};

点击事件处理

面板支持点击、选择和缩放事件。您可以使用“事件触发器”编辑器为这些事件定义自定义行为。

// Event handling
const { type: eventType, data: eventData } = event;
const { timeZone, dayjs, locationService, getTemplateSrv } = utils;
switch (eventType) {
case ‘click’:
console.log(‘Click event:’, eventData.points);
break;
case ‘select’:
console.log(‘Selection event:’, eventData.range);
break;
case ‘zoom’:
console.log(‘Zoom event:’, eventData);
break;
}

截图

截图请参见 src/img 文件夹。