nuxt(vue)でchart.jsの使い方(サイズ/位置調整などまとめ)

おすすめのオンラインプログラミング学習

chart.jsの覚書です。結構、ドキュメントやブロガーさんの記事が充実していて助かりました。

chart.jsのライセンス

chart.jsは商用利用可なMITライセンスのようです。

chart.jsのインストール

npm install vue-chartjs chart.js --save

vue-chartjsの依存関係があるため、chart.jsも必要です。ふたつインストールしましょう。基本はこの記事のとおりにいけます。

【Nuxt.js】chart.jsを使ってみる
Nuxt.jsのプロジェクトにchart.jsを導入し、グラフを描画する。一応Nuxt.jsとして紹介しているが、もちろんVue.jsでも利用できる。参考インストールVueを使うときは、chart.jsをそのまま使うのではなく、vue-ch

公式です。

最初に | 📈 vue-chartjs
⚡ Easy and beautiful charts with Chart.js and Vue.js

chartjsのtemplateエラー

Please remove the <template></template> tags from your chart component. See https://vue-chartjs.org/guide/#vue-single-file-components

リンク先をみると、次のように書かれています。

Do not include the <template> tag in your .vue single-file components. Vue can not merge templates. If you add an empty <template> tag, Vue will take the template from your component and not from the extended one, which will result in an empty template and unexpected errors.

templateを使ってはダメなようです。

表示だけならコンポーネント化して呼び出す形のようですが、v-modelなどを使いたくtempleteを使う場合は、プラグイン化して呼び出す形のようです。

NuxtでChart.jsを利用する

nuxtで利用する場合、どこからでも使えるようにプラグイン化することが一般的なのようです。

Nuxt.js ライブラリ「vue-chartjs」使用してグラフを作成する
Nuxt.jsにChart.jsを導入できるライブラリvue-chartjsをインストールして、利用するための手順。vuetifyも利用しています。
NuxtでChart.jsを利用する - Qiita
はじめに Chart.jsはjavascriptで簡単に綺麗なグラフを描くことができるチャートライブラリです。 そのChart.jsをVue.jsから利用できるようにしたvue-chart.jsというライブラリがあり、今回はそ...

mapgetterと組みあわせて使う場合は、この書き方は便利。computedで基本的なパラメーターをセットし、optionsは今までどおりdataに書きます。

  computed: {
    chartData() {
      return {
        datasets: [
          {
            data: this.chartDataValues,
            backgroundColor: this.chartColors,
          },
        ],
        labels: this.chartLabels,
      };
    },
  },

個々の数字を表示させたい(chartjs-plugin-datalabels )

個々の数字を表示させたい場合は、公式のプラグインがでているためインストールします。

npm install chartjs-plugin-datalabels --save

インポートしてaddPluginは先に呼ぶこと。

import ChartDataLabels from 'chartjs-plugin-datalabels'

mounted() {
  this.addPlugin(ChartDataLabels)
  this.renderChart(this.chartData, this.options)
}

数字はこれだけで表示されます。

公式です。

Getting Started | chartjs-plugin-datalabels
Display labels on data for any type of charts.

ほかに、Chart PieceLabelというのもあるようです。

chart.jsでレーダーチャートの作り方

公式サイトですが、こちらの記事が参考になりました。

Radar · Chart.js documentation

chart.jsのドーナツチャートの作り方

ドーナツチャートの作り方はこちらの記事を参考にしました。

【Vue.js】Vue.js + Chart.js ドーナツグラフのちょっとした小技【vue-chart.js】| blog(スワブロ) | スワローインキュベート
特許技術を活用した「ヒューマンセンシングSDKの開発」と「ソリューション提供」、「アプリ開発」などを事業としているスワローインキュベートの企業ブログです。最新の製品情報や、開発中の技術など、テクノロジー関連ブログのほか、スワローの社内行事や、社員によるブログ、求人情報なども公開しています。

chart.jsのサイズや位置調整(position relative)

レスポンティブの場合、Viewportでやった方がいいでしょう。bootstrapvue + Viewportでした。

chart.jsのグラフの位置調整です。公式サイトに次のように書かれていました。

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>
Responsive · Chart.js documentation

個人的に作りの都合上、こうしました。

.chart-size {
  position: absolute;
  width: 30vw;
  height: 30vw;
  min-width: 300px;
  min-height: 300px;
}

正方形や正円にする場合は、両方ともvwにしましょう。

divでposition: relative;の親をつくって、chartのclassにchart-sizeをつけてあげましょう。chartのclassにつけないとうまく関連付かない場合があるようです。

グラフが小さくなりすぎないように、最低値をもうけています。

簡単ですがご参考になれば幸いです。

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました