1초 단위로 데이터가 들어가는 highchart

See the Pen 1초 단위로 데이터가 들어가는 highchart by publisher.kim (@publisherkim) on CodePen.

 

 

 

 

 

html

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div class="chart" id="useChart"></div>

 

css

body{
	background: #282d3a;
}

.chart1{
    width: 300px;
    height: 300px;
    border: 1px solid;
    box-sizing: border-box;
    padding: 10px;
}

.chart2{
    width: 900px;
    height: 600px;
    border: 1px solid;
    box-sizing: border-box;
    padding: 10px;
}

.MAT20{
	margin-top: 20px;
}

.highcharts-tooltip-box {
	fill: black;
	fill-opacity: 0.4;
	stroke-width: 0;
}

.blockChart {
    width: 500px;
    height: 250px;
    border: 1px solid;
    box-sizing: border-box;
    padding: 10px;
}

 

js *jquery 필요

var operChart;
var has = false; // 시간 동기화 구분 값

$(document).ready(function() {

  // setTimeout으로 1초 뒤 차트 생성
  setTimeout(function() {
    init();
    chartData();
    has = true;
  }, 1000);

  // 이후 차트가 생성 되면 데이터 1초 단위로 갱신
  setInterval(function() {
    if (has) {
      upd();
    }
  }, 1000);

});

// 1. 차트 생성
function init() {
  var oprnOpts = {
    target: 'useChart',
    tickInterval: 150,
    data: [{
      name: '아이템1',
      color: '#f7a35c',
      data: []
    }, {
      name: '아이템2',
      color: '#fdfefe',
      data: []
    }]
  };
  operChart = Graphds(oprnOpts);
}

// 2. 초기 셋팅
function chartData() {
  var a = getAixArr();
  var b = getAixArr();
  operChart.series[0].setData(a);
  operChart.series[1].setData(b);
}

// 2-1. 시간 변수
var setOprn = {
  beforeT: 60000, // 1분전부터
  count: 60, // 60개
  interval: 1000 // 1초
}

// 2-2. 차트 초기값 데이터
function getAixArr() {
  var ts = [];
  var setDate = new Date;
  var obj = setOprn;
  var d = Date.parse(setDate) - obj.beforeT;
  var t;
  for (var i = 0; i < obj.count; i++) {
    // 분 : 초
    t = new Date(d + (i * obj.interval));
    // 데이터 예시 { x : 1684193617136, y : 30 ~ 60}
    ts[i] = {
      x: t.getTime(),
      y: Math.floor(30 + Math.random() * 30)
    };
  }
  return ts;
}

// 3. 데이터 갱신

function upd() {
  var currTime = new Date().getTime();

  var data1 = Math.floor(30 + Math.random() * 30);
  var data2 = Math.floor(30 + Math.random() * 30);

  operChart.series[0].addPoint([currTime, data1], false, true); // false로 지정해야 부드럽게 넘어감
  operChart.series[1].addPoint([currTime, data2], true, true);
}

// 차트 옵션
function Graphds(opts) {

  var chart;
  var _opts = opts || {};

  return Highcharts.chart(_opts.target, { // _opts = { target }
    chart: {
      marginTop: 10,
      type: 'spline',
      animation: Highcharts.svg,
      marginRight: 10,
      backgroundColor: 'transparent'
    },
    title: {
      text: null
    },
    credits: {
      enabled: false
    },
    xAxis: {
      type: 'datetime',
      tickPixelInterval: _opts.tickInterval,
      labels: {
        format: '{value:%H:%M:%S}',
        style: {
          color: '#ccc'
        }
      }
    },
    yAxis: {
      title: {
        text: false
      },
      labels: {
        style: {
          color: '#ccc'
        }
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#99ccff'
      }]
    },
    plotOptions: {
      spline: {
        marker: {
          enabled: false
        }
      }
    },
    tooltip: {
      positioner: function() {
        return {
          x: 45,
          y: 15
        };
      },
      style: {
        color: 'white'
      },
      shared: true,
      crosshairs: true,
      xDateFormat: '%H:%M:%S',
      valueDecimals: 2,
      valueSuffix: ' kW'
    },
    legend: {
      enabled: true,
      y: 20,
      itemStyle: {
        color: '#ccc'
      }
    },
    exporting: {
      enabled: false
    },
    series: _opts.data,
    time: {
      useUTC: false
    }
  });
}