本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# Plotly 面板
<a name="v9-panels-plotly"></a>

****  
本文档主题专为支持 **Grafana 9.x 版本**的 Grafana 工作区而设计。  
对于支持 Grafana 10.x 版本的 Grafana 工作区，请参阅[使用 Grafana 版本 10](using-grafana-v10.md)。  
对于支持 Grafana 8.x 版本的 Grafana 工作区，请参阅[使用 Grafana 版本 8](using-grafana-v8.md)。

Plotly 面板使用开源 javascript 图形库 [Plotly](https://plotly.com/javascript/) 渲染图表。

**数据**、**布局**和**配置**字段与 [Plotly 文档](https://plotly.com/javascript/plotlyjs-function-reference/)中描述的常用参数相匹配。必须采用 JSON 格式。

数据来源提供的数据可通过用户定义的脚本进行转换，然后再注入 Plotly 图表。该脚本包含 2 个参数。
+ `data`：数据来源返回的数据。
+ `variables`：当前控制面板中包含 [Grafana 变量](templates-and-variables.md)的对象（用户变量和以下几个全局变量：`__from`、`__to`、`__interval` 和 `__interval_ms`）。

该脚本返回的对象必须具有以下一个或多个属性：`data`、`layout`、`config` 和 `frames`。示例如下：

```
let x  = data.series[0].fields[0].values.buffer
let y  = data.series[0].fields[1].values.buffer
let serie = {
    x : x,
    y : y,
    name : variables.project //where project is the name of a Grafana’s variable
}

return {
    data : [serie],
    config : {
    displayModeBar: false
    }
}
```

*数据*、*布局*和*配置*字段中提供的脚本和 JSON 返回的对象将被合并（深度合并）。

如果未提供脚本，面板将仅使用*数据*、*布局*和*配置*字段。