vue-프로젝트 코인 차트 만들기(12일차)

참고
https://apexcharts.com/docs/chart-types/candlestick/

내일 할일
- 코인 클릭시 이전에 만든 차트 현재 클릭한 코인으로 데이터 갱신
- 초기 가격 기준 고가, 저가% 구하기
- 마우스 커서 올리면 시간 나오게하기
- 드래그로 캔들 움직이게하기
-  

ApexChart이용해서 비트코인 차트 만들기

1. 해당 코인 클릭시 60분간격 데이터 70개 가져오기

// bitcoinFindData.vue - javascript

     drawChart(eng, kor) {
      axios.get('https://api.upbit.com/v1/candles/minutes/60?market='+eng+'&count=70')
      .then(res => {
        console.log(res.data)
        this.coinName = kor
        this.find = true
        for(var i=0; i<res.data.length; i++){
          this.total.push([res.data[i].candle_date_time_kst, res.data[i].opening_price, res.data[i].high_price, res.data[i].low_price, res.data[i].trade_price])
        }
      })
    }, // drawChart 끝

- 해당 코인 클릭시 drawChart함수에서 eng인자로 값 받아와서 넣어주기

- total 빈배열 필요한 데이터 push 하기

- this.find =  true 값으로 변경하기(안하면 차트에 데이터값이 업데이트 안됌)

// bitcoinFindData.vue - html

<bitcoin-chart v-bind:coinName="coinName" v-bind:total="total" v-if="find===true" ></bitcoin-chart>

- props데이터 <bitcoin-chart>하위 컴포넌트에 넘겨주기

 

2. ApexChart.js 사용해서 차트 그리기

// bitcoinChart.vue

<template>
  <div>
    <apexchart type="candlestick" height="350" :options="chartOptions" :series="series"></apexchart>
  </div>

</template>

<script>
import VueApexCharts from 'vue-apexcharts'
export default {
  name: 'Chart',
  props:{
    total:{
      type: Array,
    },
    coinName:{
      type: String,
    },
  },
  components: {
    apexchart: VueApexCharts,
  },
  data() {
    return {
      series:
      [{
        data: this.total
      }],
      
      chartOptions: {
        chart: {
          type: 'candlestick',
          height: 350
        },
        title: {
          text: this.coinName,
          align: 'left'
        },
        xaxis: {
          type: 'datetime'
        },
        yaxis: {
          tooltip: {
            enabled: true
          }
        },
        fill: {
          colors: ['red', 'blue']
        },
        plotOptions: {
          candlestick: {
            // colors: {
            //   upward: 'red',
            //   downward: 'blue'
            // },
            wick: {
              useFillColor:false,
            }
          }
        }
      },

    }
  },

}
</script>

<style scoped>
</style>

- 상위 컴포넌트에서 전달받은 코인 시세와 코인 이름 data 저장