Plotly 面板

使用 Plotly.js 渲染图表。

• 导出绘图图像（带指定分辨率和类型）
• 支持 YAML/JSON
• 自动/手动时区调整
• 跨轨迹应用 Data 配置
• 可扩展的代码编辑器
• Grafana 变量替换
• 强大的错误处理
• ... 以及更多！

入门

Plotly 面板是 nLine 的尝试，旨在对我们在 Grafana 中渲染分析的方式有更多控制。它提供了一种基于组件的方法来构建 Plotly 面板。这样，您就可以独立地修改静态元素，而无需通过 JavaScript 与动态元素进行交互。

结构

data、layout 和 config 字段是必需的对象，在 Plotly 的文档 中有描述。它们必须按 此模式 结构化。但是，为了方便在开发过程中使用，它们可以被解析并解释为 YAML 或 JSON。这些字段由 Plotly 作为 { data: [traces], layout: layout, config: config } 消费，并在面板内生成一个 Plotly 图表。

数据源提供的数据可以在传递到 Plotly 图表之前通过用户定义的脚本进行转换。此 script 部分包含一些可以使用的隐式变量

data

数据源查询返回的数据。有关对象的模式，请参见下面的示例。

variables

包含 Grafana 的仪表板变量 的对象，这些变量在当前仪表板中可用（用户变量以及一些全局变量：__from、__to、__interval 和 __interval_ms）。

parameters

面板的数据、布局和配置对象。在将数据面板中的静态属性（作为一项而不是数组）跨多个轨迹应用（例如通过合并）的情况下，这可能会有所帮助。

timeZone

仪表板时区

dayjs

一个 小型时区库

matchTimezone

一个用于包装时间序列数据的便捷函数，用于将数据转换为用户的时区。

该脚本必须返回一个包含以下一个或多个属性的对象

• data
• layout
• config
• frames

注意：data 和 frames 属性是字典/JSON 数组，必须以破折号开头（符合 YAML 规范）或作为函数返回值中的数组添加。但是，“跨跟踪数据”字段可以是一个对象，在这种情况下，它将把参数应用于脚本部分中返回的所有跟踪。所有对象都会合并在一起，脚本对象优先。例如，data 来自脚本 > allData > data。

时区可以通过选择带有时区校正选项的时间列自动转换为用户仪表板时区。

Grafana 10 后的更改

⚠️ 在 Grafana 10 之前，从 data 变量访问字段的语法不同。使用 data.series[0].fields[0].values.buffer。10 版之后，这些数组存储时不带 .buffer 属性。

示例脚本

// Get the first series
let series = data.series[0];
// For buffer needed for Grafana < 10
let x = series.fields[0].values.buffer || series.fields[0].values;
let y = series.fields[1].values.buffer || series.fields[1].values;
// If you can reference your SQL column names, this might be easier
// let fields = Object.fromEntries(data.series[0].fields.map((x) => [x.name, x.values]));
// x, y = fields[’time’], fields[‘data’] // where ’time’ and ‘data’ are column names
// Switch from UTC to the dashboard time zone or use “Timezone correction” and select the column
x = matchTimezone(x);
let series = {
x: x,
y: y,
name: variables.dash_var,
// Where ‘dash_var’ is the name of
// a Grafana dashboard variable
};
return {
data: [series],
config: {
displayModeBar: false,
},
};

截图

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