Vue.jsでChart.jsを使用する方法
序章
Chart.js は、HTML5<canvas>
要素を使用してクリーンなグラフを作成するための強力な方法です。 Vueのdata()
オブジェクトを使用すると、データを保存し、必要に応じてグラフを変更するように操作することができます。
この記事では、サンプルのVueプロジェクトでChart.jsを使用して、太陽系の惑星に関する情報を表示します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Vue.jsプロジェクトのセットアップおよびVue.jsコンポーネントの使用にある程度精通していると有益な場合があります。
このチュートリアルは、Node 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 [email protected]
この時点で、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ブラウザでアプリケーションを開きます。
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ブラウザでアプリケーションを開きます。
各惑星の衛星数は折れ線グラフで表示されます。 各惑星の質量は棒グラフとして表示されます。
結論
この記事では、サンプルのVueプロジェクトでChart.jsを使用して、太陽系の惑星に関する情報を表示しました。
Chart.jsは、他のデータの視覚化に使用できます。 サンプルを調べて、プロジェクトに組み込む方法のインスピレーションを得てください。