【使い方】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も必要です。ふたつインストールしましょう。基本はこの記事のとおりにいけます。

https://developers-book.com/2020/07/26/168/

公式です。

https://vue-chartjs.org/ja/guide/#vue-%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88

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で利用する場合、どこからでも使えるようにプラグイン化することが一般的なのようです。

https://mebee.info/2020/01/21/post-4536/

https://qiita.com/kattoon/items/a76caa684261956c900b

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でレーダーチャートの作り方

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

https://www.chartjs.org/docs/latest/charts/radar.html

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

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

https://swallow-incubate.com/archives/blog/20190906/

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

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

backgroundColor: [
  '#f46e87',
  (中略),
],
hoverBackgroundColor: [
  '#f46e87',
  (中略),
],
borderColor: 'rgba(255,255,255,0.5)',
hoverBorderColor: 'rgba(255,255,255,0.5)',
スポンサーリンク

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

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

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

npm install chartjs-plugin-datalaimport ChartDataLabels from 'chartjs-plugin-datalabels'

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

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

import ChartDataLabels from 'chartjs-plugin-datalabels'

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

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

公式です。

https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html

ほかにも、Chart PieceLabelなどがあるようです。ただ、更新頻度がないものもあり、更新されているという点では、chartjs-plugin-datalabelsです。

datalabelsで背景を正円

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

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

padding: {
  right: 9,
  left: 9
}

Chart.PieceLabel.jsの使い方

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

https://github.com/emn178/chartjs-plugin-labels#usage

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

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

https://github.com/y-takey/chartjs-plugin-stacked100

https://qiita.com/takeyuichi/items/a720a4b65dc42790ac05

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

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

https://stackoverflow.com/questions/45029660/chart-js-doughnut-box-shadow

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

npm install chartjs-plugin-style --save

https://nagix.github.io/chartjs-plugin-style

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

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

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

https://stackoverflow.com/questions/45718206/chart-js2-radar-how-to-configure-the-label-padding-spacing

(追記)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>

https://www.chartjs.org/docs/latest/general/responsive.html

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

.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を使った事例としては、こちらのコードがわかりやすかったです。ありがとうございます。

https://github.com/tranmani/Fifa-Dashboard/blob/ad113395f837e0518cd0d820a0f3390bc2f6879e/src/components/Charts/BarChart.vue

チュートリアルですね。

https://blog.vanila.io/chart-js-tutorial-how-to-make-gradient-line-chart-af145e5c92f9

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はライブラリ関係まで講座があっていいなと思います。詳しくはこちらの記事で。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする