hanker
ApexCharts stepline(계단식 차트) 그리기 본문
InfluxDB를 이용해서 실시간 모니터링을 하던중에
chart설정이 생각보다 시간이 오래걸려서 나중을 위해서 기록한다..
ApexCharts
apexcharts.com/javascript-chart-demos/line-charts/stepline/
여기를 들어가면 예제 코드까지 나와있다.
우선 내 코드는
<script>
$(function(){
var options = {
series: [{
data: [3, 16, 2, 14, 15, 7, 9, 21, 7, 5, 4],
},{
data: [11, 2, 3, 1, 10, 13, 7, 8, 21, 22, 3],
}],
chart: {
type: 'line',
height: 350
},
stroke: {
curve: 'stepline',
},
dataLabels: {
enabled: false
},
title: {
text: 'Stepline Chart',
align: 'left'
},
markers: {
hover: {
sizeOffset: 4
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
});
</script>
<body> 설정
<div id="chart"></div>
apexchart, jquery cdn 설정을 해준다음 코드를 복사 붙혀넣기 하면 위 그래프가 나온다.
'SPRING' 카테고리의 다른 글
spring boot(java) - 스케쥴러(scheduler) 작업 중지시키기 (2) - quartz (1) | 2021.04.12 |
---|---|
spring boot(java) - 스케쥴러(Scheduler) 만들기 (1) - quartz (0) | 2021.04.11 |
Spring - 코드 수정시 자동 재실행 (0) | 2021.02.06 |
Spring - Runnable JAR File Export ( Launch configuration 목록이 없을때) (0) | 2021.02.06 |
Spring boot - jsp 사용 (0) | 2021.01.12 |