導入

まず第一に、これは私の最初の記事です.
私は私自身のcovid 19 trackerを作っていて、APIと呼ばれている何かに出くわしました.APIのクイックイントロ

アプリケーション・プログラム・インタフェース(API)は、ソフトウェア・アプリケーションを構築するためのルーチン、プロトコルおよびツールのセットである.

基本的に

APIは、ソフトウェアコンポーネントがどのように相互作用するべきかを指定する.

更に、

に加えて、グラフィカルユーザインタフェース(GUI)コンポーネントをプログラミングするときにAPIが使用される.

良いAPIは、簡単にすべてのビルディングブロックを提供することによってプログラムを開発することができます.プログラマは、ブロックを一緒に置きます.

始める

これは私のファイル構造です.

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

私は、axiosとチャートの作業だけに集中しています.js
Axiosとグラフをインストールします.js

npm install chart.js --save
npm install axios

使用するには:

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

データフェッチ

caseという名前のコンポーネントを作成します.ボディ/ケースのVue.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で作成された非同期ライフサイクルメソッドの下で、APIからデータを取得します.

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

そして、それをコンポーネントcaseslineとcasesbarに渡します.これらの2つのコンポーネントは、2つの小道具、ラベル、チャートを使用します.labelはフェッチされた状態名を含む配列で、対応するケースとグラフはそれぞれの状態の対応するケースを含む配列です.
APIを取得するには、

axios.get("YOUR_API");

チャート作成

ここで2つのタイプのチャートを議論します.

ラインチャート

バーチャート

ラインチャート

線図を作成するには、caseslineというファイルを作成します.VEUsのビジュアル/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>

手順:

テンプレートタグで定義されたrefでキャンバスを作成します.

2つの小道具ラベルとchartdataを定義します.

Vueのマウントされたライフサイクルメソッドの下で、新しいチャートを作成して、REF .

を使用してください

線

としてのチャートのタイプを定義します

は、チャート

のデータセットとラベルに小道具を渡します

あなたのチャートは、準備ができている

です
結果:

棒グラフ

棒グラフを作成するには、casesbarというファイルを作成します.VEEビジュアル/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と同じですが、ここのタイプはBARであるべきです.

結果:

それで終わりだ