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

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

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