기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# Plotly 패널
<a name="plotly-panel"></a>

****  
이 설명서 주제는 **Grafana 버전 8.x**를 지원하는 Grafana 워크스페이스를 위해 설계되었습니다.  
Grafana 버전 12.x를 지원하는 Grafana 워크스페이스는 섹션을 참조하세요[Grafana 버전 12에서 작업](using-grafana-v12.md).  
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` 속성 중 하나 이상을 포함한 객체를 반환해야 합니다. 다음은 예입니다.

```
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에서 반환된 객체가 병합됩니다(심층 병합).

스크립트가 제공되지 않으면 패널은 *데이터*, *레이아웃* 및 *구성* 필드만 사용합니다.