반응형
Chart.js 이어서 색감이 아름다운(?) Apexcharts를 소개드립니다.
다양한 색감을 보여드리기 위해 10개의 차트를 준비했습니다.
div에 각각의 차트 영역을 지정 합니다.
각각의 차트 영역의 HTML을 읽고 이벤트를 발생시킵니다.
소스코드를 살펴보시고 사용하실 차트를 고르시면 됩니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.36.0/apexcharts.min.js"></script>
<body>
<main id="main" class="main">
<section class="section">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Line Chart</h5>
<!-- Line Chart -->
<div id="lineChart"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#lineChart"), {
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'],
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
}).render();
});
</script>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Area Chart</h5>
<!-- Area Chart -->
<div id="areaChart"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const series = {
"monthDataSeries1": {
"prices": [
8107.85,
8128.0,
8122.9,
8165.5,
8340.7,
8423.7,
8423.5,
8514.3,
8481.85,
8487.7,
8506.9,
8626.2,
8668.95,
8602.3,
8607.55,
8512.9,
8496.25,
8600.65,
8881.1,
9340.85
],
"dates": [
"13 Nov 2017",
"14 Nov 2017",
"15 Nov 2017",
"16 Nov 2017",
"17 Nov 2017",
"20 Nov 2017",
"21 Nov 2017",
"22 Nov 2017",
"23 Nov 2017",
"24 Nov 2017",
"27 Nov 2017",
"28 Nov 2017",
"29 Nov 2017",
"30 Nov 2017",
"01 Dec 2017",
"04 Dec 2017",
"05 Dec 2017",
"06 Dec 2017",
"07 Dec 2017",
"08 Dec 2017"
]
},
}
new ApexCharts(document.querySelector("#areaChart"), {
series: [{
name: "STOCK ABC",
data: series.monthDataSeries1.prices
}],
chart: {
type: 'area',
height: 350,
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
subtitle: {
text: 'Price Movements',
align: 'left'
},
labels: series.monthDataSeries1.dates,
xaxis: {
type: 'datetime',
},
yaxis: {
opposite: true
},
legend: {
horizontalAlign: 'left'
}
}).render();
});
</script>
<!-- End Area Chart -->
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Column Chart</h5>
<!-- Column Chart -->
<div id="columnChart"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#columnChart"), {
series: [{
name: 'Net Profit',
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
}, {
name: 'Revenue',
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
}, {
name: 'Free Cash Flow',
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: {
title: {
text: '$ (thousands)'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function(val) {
return "$ " + val + " thousands"
}
}
}
}).render();
});
</script>
<!-- End Column Chart -->
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Bar Chart</h5>
<!-- Bar Chart -->
<div id="barChart"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#barChart"), {
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: true,
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
'United States', 'China', 'Germany'
],
}
}).render();
});
</script>
<!-- End Bar Chart -->
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Pie Chart</h5>
<!-- Pie Chart -->
<div id="pieChart"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#pieChart"), {
series: [44, 55, 13, 43, 22],
chart: {
height: 350,
type: 'pie',
toolbar: {
show: true
}
},
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
}).render();
});
</script>
<!-- End Pie Chart -->
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Donut Chart</h5>
<!-- Donut Chart -->
<div id="donutChart"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#donutChart"), {
series: [44, 55, 13, 43, 22],
chart: {
height: 350,
type: 'donut',
toolbar: {
show: true
}
},
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
}).render();
});
</script>
<!-- End Donut Chart -->
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Radar Chart</h5>
<!-- Radar Chart -->
<div id="radarChart"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#radarChart"), {
series: [{
name: 'Series 1',
data: [80, 50, 30, 40, 100, 20],
}],
chart: {
height: 350,
type: 'radar',
},
xaxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June']
}
}).render();
});
</script>
<!-- End Radar Chart -->
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Polar Area Chart</h5>
<!-- Polar Area Chart -->
<div id="polarAreaChart"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#polarAreaChart"), {
series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
chart: {
type: 'polarArea',
height: 350,
toolbar: {
show: true
}
},
stroke: {
colors: ['#fff']
},
fill: {
opacity: 0.8
}
}).render();
});
</script>
<!-- End Polar Area Chart -->
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Radial Bar Chart</h5>
<!-- Radial Bar Chart -->
<div id="radialBarChart"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
new ApexCharts(document.querySelector("#radialBarChart"), {
series: [44, 55, 67, 83],
chart: {
height: 350,
type: 'radialBar',
toolbar: {
show: true
}
},
plotOptions: {
radialBar: {
dataLabels: {
name: {
fontSize: '22px',
},
value: {
fontSize: '16px',
},
total: {
show: true,
label: 'Total',
formatter: function(w) {
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
return 249
}
}
}
}
},
labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
}).render();
});
</script>
<!-- End Radial Bar Chart -->
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Bubble Chart</h5>
<!-- Bubble Chart -->
<div id="bubbleChart"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
function generateData(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
series.push([x, y, z]);
baseval += 86400000;
i++;
}
return series;
}
new ApexCharts(document.querySelector("#bubbleChart"), {
series: [{
name: 'Bubble1',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble2',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble3',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble4',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
}
],
chart: {
height: 333,
type: 'bubble',
},
dataLabels: {
enabled: false
},
fill: {
opacity: 0.8
},
xaxis: {
tickAmount: 12,
type: 'category',
},
yaxis: {
max: 70
}
}).render();
});
</script>
<!-- End Bubble Chart -->
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
↓↓↓↓↓ 다양한 예제는 공식 사이트에서 확인 하실 수 있습니다.
JavaScript Chart Examples & Samples Demo – ApexCharts.js
Get a glimpse of ApexCharts by exploring all the samples created using the library. You can download these JavaScript Chart Examples and use them freely.
apexcharts.com
반응형
'개발이야기 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 실시간 시계 만들기 (타이머) (0) | 2022.10.21 |
|---|---|
| [자바스크립트] 오늘 하루 열지 않기 / 닫기 (레이어 팝업) (0) | 2022.10.21 |
| [자바스크립트] javascript 테이블 병합하기 (table td rowspan) (0) | 2022.10.13 |
| [자바스크립트] javascript 테이블 정렬하기 (table sort) (2) | 2022.10.13 |
| [자바스크립트] javascript 숫자 콤마 찍기 (number_format) (0) | 2022.10.13 |
댓글