【使い方】vue-chartjsのサイズ/グラデーションなどまとめ

プログラミング学習

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

vue-chartjsで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でcomputedで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で基本的なパラメーターをセットします。

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

Chartjsのoptionsで任意の値に初期値を変更

optionsは今までどおりdataに書きますが、optionsもコードを書いて任意の値を入れたい場合はcomputedを利用してoptionsの中身をreturnで返します。

  computed: {
    options() {
      // optionsで値を変えるコード
      return {
        // optionsの中身
      };
    },
  },

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

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

Radar Chart | Chart.js
Open source HTML5 Charts for your website

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

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

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

ドーナツチャートがマウスオーバー時に色が変わるのを防ぐ

マウスオーバー時に境界線と色が変わってしまうのが気になりました。指定を外すのかなと思ったら、同じものを指定してあげるようです。borderも似たようなプロパティがありました。

backgroundColor: [
  '#f46e87',
  (中略),
],
hoverBackgroundColor: [
  '#f46e87',
  (中略),
],
borderColor: 'rgba(255,255,255,0.5)',
hoverBorderColor: 'rgba(255,255,255,0.5)',

stackoverflowが参考になりました。

スポンサーリンク

vue-chartjsのサイズ/位置調整/数字など【細かい見た目】

個々の数字を表示させたい(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などがあるようです。ただ、更新頻度がないものもあり、更新されているという点では、chartjs-plugin-datalabelsです。

datalabelsで背景を正円

かなり細かいことです。
borderRadiusで角丸になるが、数字が縦長であるため、横長の円になってしまいます。ただ、正円の方がデザイン的によろしいです。

CSSでは幅と高さを指定してサークルを作りますが、そのパラメーターがありません。borderWidthは上下左右広がってしまうようなので、paddingを微調整していくしかなさそうです。

padding: {
  right: 9,
  left: 9
}

Chart.PieceLabel.jsの使い方

outsideなどChart.PieceLabel.jsしかできなこともあるようです。途中で書き方が変わったようです。公式サイトが参考になります。

GitHub - emn178/chartjs-plugin-labels: Plugin for Chart.js to display percentage, value or label in Pie or Doughnut.
Plugin for Chart.js to display percentage, value or label in Pie or Doughnut. - GitHub - emn178/chartjs-plugin-labels: Plugin for Chart.js to display percentage...

chart.jsでバーグラフを100%表示する

chart.jsでバーグラフを100%表示するサンプルが公式にありませんでした。探したところ、chartjs-plugin-stacked100というプラグインを作ってくれた方がいるようです。

GitHub - y-takey/chartjs-plugin-stacked100: This plugin for Chart.js that makes your bar chart to 100% stacked bar chart.
This plugin for Chart.js that makes your bar chart to 100% stacked bar chart. - GitHub - y-takey/chartjs-plugin-stacked100: This plugin for Chart.js that makes ...
Chart.jsで帯グラフ(100%積み上げ棒グラフ)を描画する - Qiita
JavaScriptのグラフ描画ライブラリであるChart.js(v2.5.0)では、帯グラフ(100%積み上げ棒グラフ)を描画することはできません。純粋な積み上げ棒グラフはオプションで指定できますが、比率をグラフ化したかったのです。...

chart.jsで影をつける、box-shodowは?

box-shodowではできないため、コードを書いていく方法になります。

Chart js doughnut box shadow
I need to add a shadow behind the doughnut, I tried with CSS like:canvas { box-shadow: 12px 21px 24px 0px rgba(0, 0, 0, 0.21);} But that applies the shadow to ...

簡単な方法としては、拡張がでていました。

npm install chartjs-plugin-style --save
chartjs-plugin-style

ベベルや光沢などもできるようです。

chart jsでradarのpointlabelsにpaddingがない!

stackoverflowに回答がありましたが、2番目の方法が楽だと個人的に感じましした。maxを余分にとってあげます。

Chart.js2 Radar, how to configure the label padding/spacing?
I have the following Radar chart using Chart.js v2. My configuration:legend: false,scale: { pointLabels :{ fontSize: 16, fontStyle: "bold", ...

(追記)paddingが追加されるような情報もありました。そのうち追加されるかもしれません。

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

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

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

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>
Page not found · GitHub Pages

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

.chart-container {
  position: relative;
  width: 30vw;
  height: 30vw;
  min-width: 300px;
  min-height: 300px;
}

.chart-size {
  position: absolute;
  padding: 20px;
}

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

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

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

スポンサーリンク

vue-chartjsのグラデーションとエラー対策

chart.jsのグラデーションサンプル

canvasを使い、mountedから呼び出します。

mountedとcomputedを使った事例としては、こちらのコードがわかりやすかったです。ありがとうございます。

Fifa-Dashboard/BarChart.vue at ad113395f837e0518cd0d820a0f3390bc2f6879e · tranmani/Fifa-Dashboard
Dashboard to visualize data from computer vision. Contribute to tranmani/Fifa-Dashboard development by creating an account on GitHub.

チュートリアルですね。

Chart.js Tutorial — How To Make Gradient Line Chart
Chart.js is a JavaScript library that allows you to create beautiful charts to represent different types of statistics. It is based on…

chart.jsのグラデーションの範囲

ちょっと忘れるのでめも。

createLinearGradientについてです。

createLinearGradient(x0,y0,x1,y1);

横方向にグラデーションをかけたい場合はこうです。

createLinearGradient(0, 150, 300, 150);

グラデーション範囲外は塗りつぶしにならないため、グラデーションが効かないと勘違いしないようにしましょう。

TypeError: Cannot read property ‘getContext’ of undefined

TypeError: Cannot read property 'getContext' of undefined

html側に ref=”canvas”の指定忘れ。

TypeError: this.$refs.canvas.getContext is not a function

client.js:103 TypeError: this.$refs.canvas.getContext is not a function

html側をcanvasに書き換えていないだけ。JS側はmounted()に書くようです。

<radar-chart
  class="chart-size"
  :chart-data="chart"
  :options="options"
  ></radar-chart>

<canvas
  id="radar-chart"
  ref="canvas"
  class="chart-size"
  :chart-data="chart"
  :options="options"
></canvas>
スポンサーリンク

chart.jsの講座

買っていないので何とも言えませんが、udemyにchart.jsの講座がありました。情報提供のみで。結構Udemyはライブラリ関係まで講座があっていいなと思います。詳しくはこちらの記事で。

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

コメント