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

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

****  
このドキュメントのトピックは、**Grafana バージョン 8.x** をサポートする Grafana ワークスペース向けです。  
Grafana バージョン 10.x をサポートする Grafana ワークスペースについては、「[Grafana バージョン 10 での作業](using-grafana-v10.md)」を参照してください。  
Grafana バージョン 9.x をサポートする Grafana ワークスペースについては、「[Grafana バージョン 9 での作業](using-grafana-v9.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;
let y = data.series[0].fields[1].values;
let series = {
    x: x,
    y: y,
    name: variables.name, // where ‘name’ is the name of a Grafana dashboard variable
};

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

*データ*、*レイアウト*、および *設定* フィールドで指定されたスクリプトと JSON によって返されるオブジェクトはマージされます (ディープマージ)。

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