chart.jsの覚書です。結構、ドキュメントやブロガーさんの記事が充実していて助かりました。
Contents
vue-chartjsでchart.js使い方【基本】
chart.jsのライセンス
chart.jsは商用利用可なMITライセンスのようです。
chart.jsのインストール
npm install vue-chartjs chart.js --savevue-chartjsの依存関係があるため、chart.jsも必要です。ふたつインストールしましょう。基本はこの記事のとおりにいけます。
https://developers-book.com/2020/07/26/168/
公式です。
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を余分にとってあげます。
(追記)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://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はライブラリ関係まで講座があっていいなと思います。詳しくはこちらの記事で。
簡単ですがご参考になれば幸いです。
コメント