Vue.jsでChart.jsを使用する方法

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

序章

Chart.js は、HTML5<canvas>要素を使用してクリーンなグラフを作成するための強力な方法です。 Vueのdata()オブジェクトを使用すると、データを保存し、必要に応じてグラフを変更するように操作することができます。

この記事では、サンプルのVueプロジェクトでChart.jsを使用して、太陽系の惑星に関する情報を表示します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
Vue.jsプロジェクトのセットアップおよびVue.jsコンポーネントの使用にある程度精通していると有益な場合があります。

このチュートリアルは、ノードv15.11.0、npm v7.6.1、vue v2.6.11、およびChart.jsv2.9.4で検証されました。

ステップ1—プロジェクトの設定

プロジェクトをすばやく設定するために、この記事では @ vue /cliの使用をお勧めします。

注：この記事では、npxを使用して、@vue/cliのグローバルインストールを回避する方法を採用します。

npx @vue/cli create vue-chartjs-example  --default

新しく作成されたプロジェクトディレクトリに移動します。

cd vue-async-computed-example

Chart.jsは、次のコマンドを使用してnpmからインストールできます。

npm install chart.js@2.9.4

この時点で、Chart.jsをサポートする新しいVueプロジェクトが作成されます。

ステップ2—チャートコンポーネントの作成

このグラフは、次の2つのデータセットで構成されます。

太陽系の各惑星が持っている衛星の数。
太陽系の各惑星の質量。

これらの2つのデータセットを使用すると、データの相関関係を示すためにさまざまなグラフタイプを使用できます。

コードエディタを開き、srcディレクトリとcomponentsサブディレクトリの下に、新しいPlanetChart.vueファイルを作成します。

すべてのChart.jsチャートには、HTMLマークアップに<canvas>が含まれている必要があります。チャートのidは、JavaScriptをチャートにバインドするためのセレクターとして使用されます。

PlanetChart.vue

<template>
  <div>
    <canvas id="planet-chart"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js'

export default {
  name: 'PlanetChart'
}
</script>

次に、App.vueファイルを変更して、新しいPlanetChartを使用します。

src / App.vue

<template>
  <div id="app">
    <PlanetChart/>
  </div>
</template>

<script>
import PlanetChart from './components/PlanetChart.vue'

export default {
  name: 'App',
  components: {
    PlanetChart
  }
}
</script>

変更をファイルに保存します。

コンポーネントと構成を分離しておくために、次にチャートデータ用の新しいファイルを作成します。

ステップ3—チャートデータの作成

Chart.jsを使用したチャートの作成は、次のようになります。

const ctx = document.getElementById('example');
const exampleChart = new Chart(ctx, {
  type: '',
  data: [],
  options: {},
});

<canvas>要素は、type、data、およびoptionsとともに渡されます。

これらの値を定義する新しいファイルを作成します。コードエディタを開き、srcディレクトリの下に、新しいplanet-data.jsファイルを作成します。データに基づいて、一意でわかりやすい名前を付ける必要があることに注意してください。このファイルには、さまざまなグラフの複数のデータオブジェクトを含めることができます。

次のコード行をplanet-data.jsに追加します。

src / planet-data.js

export const planetChartData = {
  type: "line",
  data: {
    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
    datasets: [
      {
        label: "Number of Moons",
        data: [0, 0, 1, 2, 79, 82, 27, 14],
        backgroundColor: "rgba(54,73,93,.5)",
        borderColor: "#36495d",
        borderWidth: 3
      },
      {
        label: "Planetary Mass (relative to the Sun x 10^-6)",
        data: [0.166, 2.081, 3.003, 0.323, 954.792, 285.886, 43.662, 51.514],
        backgroundColor: "rgba(71, 183,132,.5)",
        borderColor: "#47b784",
        borderWidth: 3
      }
    ]
  },
  options: {
    responsive: true,
    lineTension: 1,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            padding: 25
          }
        }
      ]
    }
  }
};

export default planetChartData;

typeはlineに設定されます。 dataは、2つのdatasets、backgroundColor、borderColor、およびborderWidthで構成されます。 optionsは、responsive、lineTension、およびscalesで構成されます。

注：折れ線グラフやbar、polarArea、radar、pie、およびdoughnut。

planetChartDataをエクスポートすることにより、constを別のJavaScriptファイルにインポートできるようになります。さらに重要なのは、データをコンポーネントから分離していることです。このベストプラクティスでは、関連するファイルにのみ変更を適用でき、長期にわたるメンテナンスが強化されます。

PlanetChartコンポーネントに再度アクセスし、planetChartDataを追加します。

src / components / PlanetChart.vue

<script>
import Chart from 'chart.js'
import planetChartData from '../planet-data.js'

export default {
  name: 'PlanetChart'
}
</script>

次に、チャートデータをdata()関数に保存します。

src / components / PlanetChart.vue

<script>
import Chart from 'chart.js'
import planetChartData from '../planet-data.js'

export default {
  name: 'PlanetChart',
  data() {
    return {
      planetChartData: planetChartData
    }
  }
}
</script>

注：ES6の省略形を使用することもできます。データのプロパティと値は同じ名前なので、planetChartData: planetChartDataの代わりにplanetChartDataを使用できます。

この時点で、Chart.jsをインストールし、チャートのデータをPlanetChartコンポーネントにインポートする必要があります。

コンポーネントのテンプレートに<canvas>要素がすでに作成されているはずです。この時点で、チャートを初期化し、<canvas>に書き込みます。

PlanetChartコンポーネントに再度アクセスし、mounted()ライフサイクルメソッドでチャートの作成を追加します。

src / components / PlanetChart.vue

<script>
import Chart from 'chart.js'
import planetChartData from '../planet-data.js'

export default {
  name: 'PlanetChart',
  data() {
    return {
      planetChartData: planetChartData
    }
  },
  mounted() {
    const ctx = document.getElementById('planet-chart');
    new Chart(ctx, this.planetChartData);
  }
}
</script>

変更をファイルに保存します。

これで、ターミナルでアプリケーションを実行できます。

npm run serve

Webブラウザでアプリケーションを開きます。

Screenshot of line charts of the number of moons and planetary mass.

2つの折れ線グラフがあります。 1つのグラフには、各惑星の衛星の数が表示されます。他のチャートは、各惑星の質量を示しています。 backgroundColor、borderColor、およびborderWidthの値は、グラフの外観に影響を与えています。線上の点を操作すると、labelsが表示されます。

ステップ4—混合チャートの表示

Chart.jsは混合チャートもサポートしています。このセクションでは、チャートの構成を折れ線グラフから、月のデータセットの折れ線グラフと質量のデータセットの棒グラフの組み合わせに変更します。

コードエディタでplanet-data.jsに再度アクセスしてください。グラフのデータのtypeプロパティを変更し、barに変更します。

src / planet-data.js

export const planetChartData = {
  type: "bar",
  data: { ... },
  options: { ... }
};

export default planetChartData;

この時点で、両方のグラフは棒グラフになります。

ただし、棒グラフと線グラフを組み合わせて表示する必要があります。これを変更するには、各datasetオブジェクトで、labelプロパティの下にtypeプロパティを追加します。最初のdatasetオブジェクトには、値がlineのtypeプロパティを指定し、2番目のオブジェクトには、値がtypeのプロパティを指定します。 bar：

src / planet-data.js

export const planetChartData = {
  type: "bar",
  data: {
    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
    datasets: [
      {
        label: "Number of Moons",
        type: "line',
        data: [0, 0, 1, 2, 79, 82, 27, 14],
        backgroundColor: "rgba(54,73,93,.5)",
        borderColor: "#36495d",
        borderWidth: 3
      },
      {
        label: "Planetary Mass (relative to the Sun x 10^-6)",
        type: "bar",
        data: [0.166, 2.081, 3.003, 0.323, 954.792, 285.886, 43.662, 51.514],
        backgroundColor: "rgba(71, 183,132,.5)",
        borderColor: "#47b784",
        borderWidth: 3
      }
    ]
  },
  options: { ... }
};

export default planetChartData;

変更をファイルに保存します。

これで、ターミナルでアプリケーションを実行できます。

npm run serve

Webブラウザでアプリケーションを開きます。

Screenshot of line chart of moons and bar chart of planetary mass.

各惑星の衛星数は折れ線グラフで表示されます。各惑星の質量は棒グラフとして表示されます。

結論

この記事では、サンプルのVueプロジェクトでChart.jsを使用して、太陽系の惑星に関する情報を表示しました。

Chart.jsは、他のデータの視覚化に使用できます。サンプルを調べて、プロジェクトに組み込む方法のインスピレーションを得てください。

getdocs

13036