Plotly 面板用于 Grafana

使用 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 用于日期操作）

上下文变量

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

变量

此对象包含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文件夹。