翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Plotly パネル
<a name="v9-panels-plotly"></a>

****  
このドキュメントのトピックは、**Grafana バージョン 9.x** をサポートする Grafana ワークスペース向けです。  
Grafana バージョン 12.x をサポートする Grafana ワークスペースについては、「」を参照してください[Grafana バージョン 12 での作業](using-grafana-v12.md)。  
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` のプロパティから 1 つ以上を有するオブジェクトを返す必要があります。以下に例を示します。

```
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 によって返されるオブジェクトはマージされます (ディープマージ)。

スクリプトが指定されていない場合、パネルは*データ*、*レイアウト*、および *設定* フィールドのみを使用します。