티스토리 뷰
반응형
Plotly chart를 작성하기 위한 기본 구성
0. Plotly 선언 / Div 생성
1. Data / Data Set
2. Layout
3. Config
4. Plotly 호출
Plotly 선언 / Div 생성
아래와 같이, <head>와 <body>에 코드를 생성한다.
여기서, <Div> 생성시 width나 Height 값에 %의 비율값으로 선언하면, 나중에 plotly chart 생성시 modebar 위치가 이상한곳에 출력되는 것을 발견하였다. 꼭 절대치수 (px, pt, em) 등으로 크기를 선언하자.
<head>
<script src='https://cdn.plot.ly/plotly-latest.min.js'>
</head>
<body>
<div id="div_chart" style="width :1000px; height : 400px;">
</div>
</body>
Data
data 는 2D chart 기준으로 x, y data 배열과 chart를 그리기 위한 옵션, line type 및 marker에 대한 세부 옵션들을 포함한다.
https://plotly.com/python/marker-style/를 참고한다
var trace = { x: dx, //[1, 2, 3, 4],
y: dy, //art_[12, 9, 15, 12],
mode: 'lines+markers',
type: 'scatter',
line: {
color: 'grey' , //'rgb(219, 64, 82)',
dash: 'dot', // solid, dashdot width: 0.5
},
marker: {
// color: 'rgb(142, 124, 195)',
size: 8,
line : { color : 'red', width : 2 },
symbol : 'x-thin' }
};
data는 chart의 line 1개를 정의하며, 여러 개의 line을 작도할 경우는 여러 개의 data가 필요하다. 다음과 같이 준비한다.
var dataset = [trace1, trace2, trace3];
Layout
Chart의 x, y축과 각각 축에 대한 세부 설정, 출력 숫자 포맷 및 여백 등을 아래와 같이 셋팅한다.
var layout = {
xaxis: {
//range: [ 0.75, 5.25 ]
showline: true,
mirror: true,
tickformat :".3f",
ticks: 'outside',
title: "<i>Distance (M)</i>"
},
yaxis: {
//range: [0, 8]
showline: true,
mirror: true,
tickformat :".3f",
ticks: 'outside',
title: "<i>Elev (M)</i>"
},
title: "chart title",
margin: {
l: 100,
r: 50,
b: 100,
t: 40,
//pad: 4
}
};
Config
Chart를 조작하는 modebar를 설정하는 부분..
var config= {
displaylogo: false,
displayModeBar: true,
modeBarButtonsToRemove: ['select2d','lasso2d']
//참고 : 'pan2d','select2d','lasso2d','resetScale2d','zoomOut2d']
}
“파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"
댓글