Vue.js로 주가 도표를 표시하는 보기 좋은 도구 소개(APEXCHARTS)

APEXCHARTS

이전 글[골랑과 DB를 연결해 주가 데이터를 표시한다.]에서는 Google Charts를 이용하여 그래프를 표시했지만 최근에 Vue를 공부하다가 APEXCHARTS와 같은 좋은 도구를 발견해 공유했다.
(이하, Vue에 설치하는 방법을 설명하지만 일반적인 자바스크립트든 React든 모두 사용할 수 있습니다. 자세히 알고 싶은 분은 APEXCHARTS 홈페이지에서 조사해 주십시오.)
APEXCHARTS

이번에는 DEMO에도 있는 캔들스틱을 사용해 시행한다.

이번에 Basic 버전을 채택했습니다.

차리다

DEMO 사이트에는 상세한 설치 방법이 없기 때문에 APEXCHARTS의Github를 참고했습니다.

npm

npm install --save apexcharts

출처

HelloWorld.vue

<template>
  <div>
    <apexchart width="1500" type="candlestick" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
import ApexCharts from 'apexcharts'

export default {
  data: function() {
    return {
      chartOptions: {
        title: {
          text: 'CandleStick Chart',
          align: 'left'
        },
        xaxis: {
          type: 'datetime'
        },
        yaxis: {
          tooltip: {
            enabled: true
          }
        }
      },

      series: [{
        data: [{
            "x": "2019-04-02",
            "y": [6629.81, 6650.5, 6623.04, 6633.33]
          },
          {
            "x": "2019-04-03",
            "y": [6632.01, 6643.59, 6620, 6630.11]
          },
          {
            "x": "2019-04-04",
            "y": [6630.71, 6648.95, 6623.34, 6635.65]
          },
        ]
      }],
    }
  },
};
</script>

데이터의 내용은 json이 x에 날짜를 설정하고 y에 [시작값, 고가, 저가, 마감가격]을 설정하면 비교적 튼튼한 도표를 나타낼 수 있다.

이번 소개는 실천적인 출처가 아니다. 다음 보도는 Go가 구축한 웹 서버에서 주가 데이터를 전달하는 json의 방법에 대해 설명한다.