반응형
아래 코드는 Plotly.js 라이브러리를 사용하여 다양한 형태의 차트를 생성하는 예제입니다.
Plotly 차트는 사용자를 위해 마우스를 이용한 동작과 터치 등을 통해 차트를 확인할 수 있고 조작할 수 도 있습니다.
원하는 차트 스타일과 데이터를 변경하여 사용하시면 됩니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<style>
div {margin:20px;}
</style>
<body>
<h1>Bar Chart</h1>
<div id="bar-chart"></div>
<script>
// 데이터 배열 정의 (카테고리와 값)
const data = [
{ category: "A", value: 10 },
{ category: "B", value: 20 },
{ category: "C", value: 15 },
{ category: "D", value: 25 },
{ category: "E", value: 18 },
{ category: "F", value: 30 }
];
// 데이터를 x와 y 배열로 분리
const xData = data.map(d => d.category);
const yData = data.map(d => d.value);
// 막대 그래프 레이아웃 정의
const barLayout = {
title: "Bar Chart",
xaxis: { title: "Category" },
yaxis: { title: "Value" }
};
// 막대 그래프 생성
Plotly.newPlot('bar-chart', [{ x: xData, y: yData, type: 'bar' }], barLayout);
</script>
<h1>Pie Chart</h1>
<div id="pie-chart"></div>
<script>
// 원 그래프 레이아웃 정의
const pieLayout = {
title: "Pie Chart"
};
// 원 그래프 생성
Plotly.newPlot('pie-chart', [{ values: yData, labels: xData, type: 'pie' }], pieLayout);
</script>
<h1>Line Chart</h1>
<div id="line-chart"></div>
<script>
// 선 그래프 레이아웃 정의
const lineLayout = {
title: "Line Chart",
xaxis: { title: "Category" },
yaxis: { title: "Value" }
};
// 선 그래프 생성
Plotly.newPlot('line-chart', [{ x: xData, y: yData, type: 'scatter', mode: 'lines+markers' }], lineLayout);
</script>
<h1>Scatter Plot</h1>
<div id="scatter-plot"></div>
<script>
// 산점도 그래프 레이아웃 정의
const scatterLayout = {
title: "Scatter Plot",
xaxis: { title: "X Axis" },
yaxis: { title: "Y Axis" }
};
// 산점도 그래프 데이터 생성
const scatterData = [
{ x: [1, 2, 3, 4, 5], y: [10, 20, 30, 40, 50], mode: 'markers', type: 'scatter' },
{ x: [1, 2, 3, 4, 5], y: [5, 15, 25, 35, 45], mode: 'markers', type: 'scatter' }
];
// 산점도 그래프 생성
Plotly.newPlot('scatter-plot', scatterData, scatterLayout);
</script>
<h1>Histogram</h1>
<div id="histogram"></div>
<script>
// 히스토그램 레이아웃 정의
const histogramLayout = {
title: "Histogram",
xaxis: { title: "Value" },
yaxis: { title: "Frequency" }
};
// 히스토그램 생성
Plotly.newPlot('histogram', [{ x: [10, 15, 20, 25, 25, 30, 30, 30, 35, 40, 40, 40], type: 'histogram' }], histogramLayout);
</script>
<h1>Bubble Chart</h1>
<div id="bubble-chart"></div>
<script>
// Bubble Chart 레이아웃 정의
const bubbleLayout = {
title: "Bubble Chart",
xaxis: { title: "X Axis" },
yaxis: { title: "Y Axis" }
};
// Bubble Chart 데이터 생성
const bubbleData = [{
x: [1, 2, 3, 4, 5],
y: [10, 20, 30, 40, 50],
mode: 'markers',
marker: {
size: [30, 60, 90, 120, 150],
sizemode: 'diameter'
},
type: 'scatter'
}];
// Bubble Chart 생성
Plotly.newPlot('bubble-chart', bubbleData, bubbleLayout);
</script>
<h1>Area Chart</h1>
<div id="area-chart"></div>
<script>
// Area Chart 레이아웃 정의
const areaLayout = {
title: "Area Chart",
xaxis: { title: "X Axis" },
yaxis: { title: "Y Axis" }
};
// Area Chart 데이터 생성
const areaData = [{
x: [1, 2, 3, 4, 5],
y: [10, 20, 30, 40, 50],
fill: 'tozeroy',
type: 'scatter'
}];
// Area Chart 생성
Plotly.newPlot('area-chart', areaData, areaLayout);
</script>
</body>
</html>
반응형
'개발이야기 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 신용카드 번호 자동으로 하이픈(-) 넣기 (oninput) (0) | 2023.08.25 |
|---|---|
| [자바스크립트] setTimeout(), setInterval() 사용법과 예제 (반복 실행) (0) | 2023.08.01 |
| [자바스크립트] Base64 사용방법/예제 (인코딩, 디코딩, 한글, 특수문자) (0) | 2023.07.28 |
| [자바스크립트] 카카오맵 API 이용해 카테고리 장소 마커로 보여주기 (2) | 2023.07.25 |
| [자바스크립트] 카카오맵 API 이용해 폴리곤으로 대한민국(시/도) 구분하기 (0) | 2023.07.24 |
댓글