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

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

从数据帧读取值

当您构建面板插件时，数据源返回的数据帧可以从面板组件的 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);

从数据帧显示值​

从数据帧显示值