Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 명령어
- oracle
- mssql
- 트랜잭션
- 오블완
- java
- SQL
- 자바
- group by
- docker
- git
- MariaDB
- PostgreSQL
- 호이스팅
- DBMS
- analytics4
- Python
- Exception
- JPA
- Linux
- 추상클래스
- spring
- rsync
- 티스토리챌린지
- 차이점
- 리눅스
- IntelliJ
- Javascript
- MongoDB
- mysql
Archives
- Today
- Total
hanker
ApexCharts stepline(계단식 차트) 그리기 본문
반응형
InfluxDB를 이용해서 실시간 모니터링을 하던중에
chart설정이 생각보다 시간이 오래걸려서 나중을 위해서 기록한다..
ApexCharts
apexcharts.com/javascript-chart-demos/line-charts/stepline/
JavaScript Stepline Chart Example – ApexCharts.js
View an example of a JavaScript stepline chart created with ApexCharts.js
apexcharts.com
여기를 들어가면 예제 코드까지 나와있다.
우선 내 코드는
<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 |