数据帧是一种列式数据结构，允许高效地查询大量数据。由于数据帧是开发 Grafana 插件时的一个核心概念，在这个指南中，我们将探讨一些您可以在面板插件中使用它们来可视化数据源查询返回数据的方法。

DataFrame接口包含一个name和一个包含fields数组的对象，其中每个字段都包含字段的名称、类型和值。

从数据帧中读取值

当您构建面板插件时，数据源返回的数据帧可以通过您面板组件中的data属性访问。

function SimplePanel({ data: Props }) {
  const frame = data.series[0];

  // ...
}

在开始读取数据之前，考虑一下您期望的数据。例如，为了可视化时间序列，您至少需要一个时间字段和一个数字字段。

const timeField = frame.fields.find((field) => field.type === FieldType.time);
const valueField = frame.fields.find((field) => field.type === FieldType.number);

其他类型的可视化可能需要多个维度。例如，使用三个数字字段（X轴、Y轴和每个气泡的半径）的气泡图。在这种情况下，我们建议您允许用户为每个维度选择要使用的字段，而不是硬编码字段名称。

const x = frame.fields.find((field) => field.name === xField);
const y = frame.fields.find((field) => field.name === yField);
const size = frame.fields.find((field) => field.name === sizeField);

for (let i = 0; i < frame.length; i++) {
  const row = [x?.values[i], y?.values[i], size?.values[i]];

  // ...
}

或者，您可以使用DataFrameView，它给您一个包含每个字段属性的对象数组。

const view = new DataFrameView(frame);

view.forEach((row) => {
  console.log(row[options.xField], row[options.yField], row[options.sizeField]);
});

显示数据帧中的值

字段选项允许用户控制 Grafana 如何在数据帧中显示数据。

要将字段选项应用于值，请使用对应字段上的 display 方法。结果包含有关在显示值时使用颜色和后缀的信息。

const valueField = frame.fields.find((field) => field.type === FieldType.number);

return (
  <div>
    {valueField
      ? valueField.values.map((value) => {
          const displayValue = valueField.display!(value);
          return (
            <p style={{ color: displayValue.color }}>
              {displayValue.text} {displayValue.suffix ? displayValue.suffix : ''}
            </p>
          );
        })
      : null}
  </div>
);

要将字段选项应用于字段名称，请使用 getFieldDisplayName。

const valueField = frame.fields.find((field) => field.type === FieldType.number);
const valueFieldName = getFieldDisplayName(valueField, frame);

显示数据帧中的值​

显示数据帧中的值