소개

우선, 이것은 나의 첫 번째 기사가 될 것입니다 :), 많은 지원과 저를 따르십시오.
나는 내 자신의 COVID19Tracker를 만들고 API라는 것을 발견했습니다. API에 대한 빠른 소개:

API(응용 프로그램 인터페이스)는 소프트웨어 응용 프로그램을 구축하기 위한 일련의 루틴, 프로토콜 및 도구입니다.

기본적으로 API는 소프트웨어 구성 요소가 상호 작용하는 방식을 지정합니다.

또한 GUI(그래픽 사용자 인터페이스) 구성 요소를 프로그래밍할 때 API가 사용됩니다.

좋은 API는 모든 빌딩 블록을 제공하여 프로그램을 더 쉽게 개발할 수 있도록 합니다. 그런 다음 프로그래머가 블록을 함께 넣습니다.

시작하기

이것은 내 파일 구조였습니다.

D:.
└───components
    ├───Body
    ├───DataGathering
    ├───Footer
    ├───Header
    ├───HomePage
    │   ├───assets
    │   └───Breads
    ├───Maps
    └───Visuals

저는 Axios와 Chart.js 작업에만 집중할 것입니다.

axios 및 chart.js를 설치하려면:

npm install chart.js --save
npm install axios

사용하려면:

import Chart from 'chart.js';
const axios = require("axios");

데이터 가져오기

Body/Cases.vue에 Cases.vue라는 구성 요소를 만듭니다.

<template>
<div>
    <br>
    <br>
    <div>
        <CaseBread></CaseBread>
        <hr/>
        <br>
        <h2>Cases</h2>
        <CasesLine
        :label="labels"
        :chart-data="confirmed" 
        ></CasesLine>
        <br>
        <br>
        <CasesBar
        :label="labels"
        :chart-data="confirmed" 
        ></CasesBar>
        <br>
        <br>
    </div>
</div>
</template>

<script>
const axios=require("axios")
import CasesBar from '@/components/Visuals/CasesBar'
import CasesLine from '@/components/Visuals/CasesLine'
import CaseBread from '@/components/HomePage/Breads/CaseBread'
export default {
     data : ()=> {
        return {
            labels : [],
            confirmed : [],
        }

    },
    components : {
        CasesLine,
        CasesBar,
        CaseBread
    },
    async created() {
  const { data } = await axios.get("https://covid19.mathdro.id/api/confirmed");
  var c=0
  for(var i=0;i<1000;i++){
    if(data[i].countryRegion=="India"){
            if (data[i].provinceState in this.labels){
              continue
            }
            else{
              this.labels.push(data[i].provinceState)
              this.confirmed.push(data[i].confirmed)
              c=c+1
              if(c==28){
                break
              }
            }
          }
  }
console.log(this.labels)
}   
}
</script>

메모:

이를 복사하는 동안 CasesBread 및 모든 관련 요소를 제거하십시오.

그래서 무엇을합니까?

vue에서 "created"라고 하는 비동기 수명 주기 메서드에서 API에서 데이터를 가져옵니다.

 https://covid19.mathdro.id/api/confirmed 

CasesLine 및 CasesBar 구성 요소에 전달합니다. 이 두 구성 요소는 레이블과 차트라는 두 개의 소품을 사용합니다. Label은 가져온 상태 이름과 해당 사례를 포함하는 배열이고 차트는 각 상태에서 해당 사례를 포함하는 배열입니다.

API를 가져오려면 다음을 사용하세요.

axios.get("YOUR_API");

차트 만들기

여기서는 두 가지 유형의 차트에 대해 설명합니다.

라인 차트

막대 차트

라인 차트

꺾은선형 차트를 만들려면 Visuals/CasesLine.vue에 CasesLine.vue라는 파일을 만듭니다.

<template>
  <canvas ref="myChart" width="900px" height="250px"></canvas>
</template>

<script>
import Chart from 'chart.js';
export default {
  props: {
    label: {
      type: Array
    },
    chartData: {
      type: Array
    },
  },
  aysnc mounted() {
    await new Chart(this.$refs.myChart, {
      type: 'line',
      data: {
        labels: this.label,
        datasets: [
        {
            label: 'CASES',
            borderColor: 'rgba(245, 229, 27, 1)',
            backgroundColor: 'rgba(255, 236, 139,0.2)',
            data: this.chartData,
        }
        ]
      },
      options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
    }
    });
  }
}
</script>

절차:

정의된 참조가 있는 템플릿 태그에 캔버스를 만듭니다.

두 개의 props 레이블과 차트 데이터를 정의합니다.

Vue의 마운트된 수명 주기 메서드에서 새 차트를 만들고 참조를 사용합니다.

차트 유형을 선으로 정의

차트의 데이터 세트 및 레이블에 소품을 전달합니다

.

차트가 준비되었습니다

결과:

막대 차트

막대 차트를 만들려면 Visuals/CasesBar.vue에 CasesBar.vue라는 파일을 만듭니다.

<template>
  <canvas ref="myChart" width="900px" height="250px"></canvas>
</template>

<script>
import Chart from 'chart.js';
export default {
  props: {
    label:  {
      type: Array
    },
    chartData:  {
      type: Array
    }
  },
  async mounted() {
    await new Chart(this.$refs.myChart, {
      type: 'bar',
      data: {
        labels: this.label,
        datasets: [
        {
            label: 'CASES',
            backgroundColor: 'rgba(144,238,144 , 0.9 )',
            data: this.chartData,
        }
        ]
      },
      options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
    }
    });
  }
}
</script>

절차:

여기에서 유형이 막대여야 한다는 점을 제외하고 모든 점은 linechart 와 동일합니다.

결과:

그게 끝이야