hanker

ApexCharts stepline(계단식 차트) 그리기 본문

SPRING

ApexCharts stepline(계단식 차트) 그리기

hanker 2021. 4. 2. 09:43
반응형

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  (2) 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
'SPRING' Related Articles more