[자바스크립트] TOAST UI Chart 사용법, 예제, 차트 그리기

아래 소스 코드는 Toast UI Chart 라이브러리를 사용하여 다양한 형태의 차트를 생성하고 렌더링 하는 예제 코드입니다.
이 외에도 다양한 예제와 테마가 있으니, 참조하셔서 사용하시면 됩니다.

 

<!-- Toast UI Chart 라이브러리 추가 -->
<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css">
<script src="https://uicdn.toast.com/chart/latest/toastui-chart.min.js"></script>
<style>
/* 각 차트를 감싸는 div 요소에 스타일을 적용하여 줄바꿈 설정 */
.chart-container {
	width: 100%;
	height: 300px;
	float: left;
	margin-right: 20px; /* 차트 간격을 설정합니다. */
	margin-bottom: 20px; /* 차트 간격을 설정합니다. */
}
</style>
<div class="chart-container">
	<div id="barChart"></div>
</div>
<div class="chart-container">
	<div id="lineChart"></div>
</div>
<div class="chart-container">
	<div id="pieChart"></div>
</div>
<div class="chart-container">
	<div id="heatmapChart"></div>
</div>

<div class="chart-container">
	<div id="bubbleChart"></div>
</div>
<div class="chart-container">
	<div id="radarChart"></div>
</div>
<script>
// 막대 차트 데이터
const barChartData = {
   categories: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
	  series: [
		{
		  name: 'Budget',
		  data: [5000, 3000, 5000, 7000, 6000, 4000, 1000]
		},
		{
		  name: 'Income',
		  data: [8000, 4000, 7000, 2000, 6000, 3000, 5000]
		},
		{
		  name: 'Expenses',
		  data: [4000, 4000, 6000, 3000, 4000, 5000, 7000]
		},
		{
		  name: 'Debt',
		  data: [3000, 4000, 3000, 1000, 2000, 4000, 3000]
		}
	  ]
};

// 라인 차트 데이터
const lineChartData = {
			 categories: [
	'01/01/2020',
	'02/01/2020',
	'03/01/2020',
	'04/01/2020',
	'05/01/2020',
	'06/01/2020',
	'07/01/2020',
	'08/01/2020',
	'09/01/2020',
	'10/01/2020',
	'11/01/2020',
	'12/01/2020',
  ],
  series: [
	{
	  name: 'Seoul',
	  data: [-3.5, -1.1, 4.0, 11.3, 17.5, 21.5, 25.9, 27.2, 24.4, 13.9, 6.6, -0.6],
	},
	{
	  name: 'Seattle',
	  data: [3.8, 5.6, 7.0, 9.1, 12.4, 15.3, 17.5, 17.8, 15.0, 10.6, 6.6, 3.7],
	},
  ],
};

// Pie 차트 데이터
const pieChartData = {
	categories: ['Browser'],
	series: [
	  {
		name: 'Chrome',
		data: 46.02,
	  },
	  {
		name: 'IE',
		data: 20.47,
	  },
	  {
		name: 'Firefox',
		data: 17.71,
	  },
	  {
		name: 'Safari',
		data: 5.45,
	  },
	  {
		name: 'Opera',
		data: 3.1,
	  },
	  {
		name: 'Etc',
		data: 7.25,
	  },
	],
};

// 히트맵 차트 데이터
const heatmapChartData = {
	categories: {
		x: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
		y: ['Morning', 'Afternoon', 'Evening']
	},
	series: [
		[20, 30, 25, 40, 50],
		[10, 15, 30, 35, 45],
		[5, 10, 15, 20, 25]
	]
};

// Bubble 차트 데이터
const bubbleChartData = {
	 series: [
		{
		  name: 'Africa',
		  data: [
			{ x: 30, y: 100, r: 10, label: 'Morocco' },
			{ x: 40, y: 200, r: 30, label: 'Egypt' },
		  ],
		},
		{
		  name: 'America',
		  data: [
			{ x: 60, y: 40, r: 50, label: 'Canada' },
			{ x: 50, y: 300, r: 10, label: 'United States' },
		  ],
		},
		{
		  name: 'Asia',
		  data: [
			{ x: 10, y: 150, r: 20, label: 'Korea, South' },
			{ x: 20, y: 200, r: 30, label: 'Singapore' },
		  ],
		},
	  ],
};

// Radar 차트 데이터
const radarChartData = {
	categories: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
  series: [
	{
	  name: 'Budget',
	  data: [5000, 3000, 5000, 7000, 6000, 4000],
	},
	{
	  name: 'Income',
	  data: [8000, 4000, 7000, 2000, 6000, 3000],
	},
	{
	  name: 'Expenses',
	  data: [4000, 4000, 6000, 3000, 4000, 5000],
	},
	{
	  name: 'Debt',
	  data: [3000, 4000, 3000, 1000, 2000, 4000],
	},
  ],
};
// 공통 옵션
const commonOptions = {
	chart: { width: 700, height: 300 },
};

// 막대 차트 생성 및 렌더링
const barChartContainer = document.getElementById('barChart');
const barChart = new toastui.Chart.barChart({ el: barChartContainer, data: barChartData, options: commonOptions });

// 라인 차트 생성 및 렌더링
const lineChartContainer = document.getElementById('lineChart');
const lineChart = new toastui.Chart.lineChart({ el: lineChartContainer, data: lineChartData, options: commonOptions });

// 원형 차트 생성 및 렌더링
const pieChartContainer = document.getElementById('pieChart');
const pieChart = new toastui.Chart.pieChart({ el: pieChartContainer, data: pieChartData, options: commonOptions });

// 히트맵 차트 생성 및 렌더링
const heatmapChartContainer = document.getElementById('heatmapChart');
const heatmapChart = new toastui.Chart.heatmapChart({ el: heatmapChartContainer, data: heatmapChartData, options: commonOptions });

// Bubble 차트 생성 및 렌더링
const bubbleChartContainer = document.getElementById('bubbleChart');
const bubbleChart = new toastui.Chart.bubbleChart({ el: bubbleChartContainer, data: bubbleChartData, options: commonOptions });

// Radar 차트 생성 및 렌더링
const radarChartContainer = document.getElementById('radarChart');
const radarChart = new toastui.Chart.radarChart({ el: radarChartContainer, data: radarChartData, options: commonOptions });
</script>

 

소스코드 실행결과