tag:crieit.net,2005:https://crieit.net/tags/%E3%82%B0%E3%83%A9%E3%83%95/feed Crieitでタグ「グラフ」に投稿された最近の記事 2019-09-22T12:01:25+09:00 https://crieit.net/tags/%E3%82%B0%E3%83%A9%E3%83%95/feed tag:crieit.net,2005:PublicArticle/15414 2019-09-22T12:01:25+09:00 2019-09-22T12:01:25+09:00 https://crieit.net/posts/TypeScript-Nuxt-js-vue-chartjs-chart-js <p>Nuxt.jsで開発している<a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">Webサービス</a>で、<br /> 棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。</p> <p><a target="_blank" rel="nofollow noopener" href="https://vue-chartjs.org/">vue-chartjs</a>を使うと、いい感じのグラフが簡単にできた(<em>´ω｀</em>)</p> <h2 id="こんな感じで使ってます!!"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E6%84%9F%E3%81%98%E3%81%A7%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%21%21">こんな感じで使ってます!!</a></h2> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/061cfd7c-d18e-bbc5-37bc-77e191d3f034.png" width="720" /></p> <p>登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!!<br /> 色も文字も変えられて、いい感じに(<em>´ω｀</em>)</p> <hr /> <h2 id="vue-chartjsの使い方"><a href="#vue-chartjs%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9">vue-chartjsの使い方</a></h2> <p>全体の流れはこんな感じ。<br /> 1. インストール<br /> 2. コンポーネントを作る<br /> 3. コンポーネントを配置する</p> <h3 id="1. インストール"><a href="#1.+%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">1. インストール</a></h3> <p>まずはインストール</p> <pre><code class="console">$ npm install vue-chartjs chart.js --save </code></pre> <h3 id="2. コンポーネントを作る"><a href="#2.+%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B">2. コンポーネントを作る</a></h3> <pre><code class="html"><!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import Chart from "chart.js"; import VueChart from "vue-chartjs"; const Line = VueChart.Line; const reactiveProp = VueChart.mixins.reactiveProp; @Component export default class ChartLine extends mixins(Line, reactiveProp) { @Prop({ default: {} }) chartData: Chart.ChartData; @Prop({ default: {} }) options: Chart.ChartOptions; mounted() { this.renderChart(this.chartData, this.options); } } </script> </code></pre> <p><strong>注意点としては、以下の3つ</strong></p> <ol> <li><code>vue-chartjs</code>が生成するので、<code><template></code>タグをつけない</li> <li><code>mixins</code>が重複するので、<code>import Chart from "chart.js";</code></li> <li>データのProp名はreactivePropで決まってるので<code>chartData</code>にする<br /> 参考: <a target="_blank" rel="nofollow noopener" href="https://github.com/apertureless/vue-chartjs/blob/18f11350a2e505014c2c4d1a9b68a92bfe8cd394/src/mixins/index.js#L89-L94">src/mixins/index.js | Github</a></li> </ol> <p>この例は折れ線グラフのため、<code>Line</code>をextendsしてるけど、<br /> ほかのチャートは、それぞれコンポーネントを用意すればOK</p> <p>棒グラフの場合はこんな感じ。</p> <pre><code class="html"><!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import Chart from "chart.js"; import VueChart from "vue-chartjs"; // 棒グラフの場合は、Barを使う const Bar = VueChart.Bar; const reactiveProp = VueChart.mixins.reactiveProp; @Component // mixinsもBarに変更 export default class ChartLine extends mixins(Bar, reactiveProp) { @Prop({ default: {} }) chartData: Chart.ChartData; @Prop({ default: {} }) options: Chart.ChartOptions; mounted() { this.renderChart(this.chartData, this.options); } } </script> </code></pre> <h3 id="3. コンポーネントを配置する"><a href="#3.+%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B">3. コンポーネントを配置する</a></h3> <p>2.で作成したコンポーネントChartLineとChartBarを配置する。<br /> チャートのデータ(chartData)やオプション、スタイルをpropで設定。</p> <pre><code class="html"><template> <div class="chart-container"> <ChartLine :chartData="chartData" :options="chartOption" :styles="chartStyles" /> </div> </template> <script lang="ts"> import { Component, Vue, Prop } from "nuxt-property-decorator"; import { ChartData, ChartOptions } from "chart.js"; import ChartLine from "~/components/ChartLine.vue"; import ChartBar from "~/components/ChartBar.vue"; @Component({ components: { ChartLine, ChartBar } }) export default class ChartPage extends Vue { // チャートのデータ private chartData: ChartData = { // 横軸のラベル labels: ["A", "B", "C", "D", "E"], // データのリスト datasets: [ { label: "Data One", // データのラベル data: [1, 5, 3, 4, 3] // データの値。labelsと同じサイズ }, { label: "Data Two", data: [10, 50, 30, 40, 30] } ] }; // チャートのオプション private chartOption: ChartOptions = { // アスペクト比を固定しないように変更 maintainAspectRatio: false }; // チャートのスタイル: <canvas>のstyle属性として設定 private chartStyles = { height: "100%", width: "100%" }; } </script> <style lang="scss"> .chart-container { /** * vue-chartjsで生成する<canvas>がabsoluteのため、 * relateveを設定 */ position: relative; /** * chartStylesを設定しているので、 * height/wightが有効になる */ height: 40vh; width: 80vw; margin: 0 auto; } </style> </code></pre> <p>こんな感じでチャートデータを渡すと、こんな感じに(<em>´ω｀</em>)</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/038debbe-9a52-876a-a28c-d8d9de6cfb08.png" width="720"/></p> <p><strong>注意: ハマったポイント</strong></p> <p>グラフ描画だけであれば、データを渡すだけなので簡単(<em>´ω｀</em>)<br /> ただ、サイズを変えるのは一苦労...</p> <p>注意するのは3つ。</p> <ol> <li><code>chartOption</code>で<code>maintainAspectRatio: false</code>を指定</li> <li><code>chartStyles</code>でチャートのheight/widthを100%に設定</li> <li>親要素(<code>.chart-container</code>)に<code>position: relative;</code></li> </ol> <p>vue-chartjsには<code>chartStyles</code>以外にもpropがあるので、<br /> ほかは<a target="_blank" rel="nofollow noopener" href="https://vue-chartjs.org/api/#props">公式ドキュメント</a>を参照</p> <hr /> <h2 id="いろいろ設定を変えてみる"><a href="#%E3%81%84%E3%82%8D%E3%81%84%E3%82%8D%E8%A8%AD%E5%AE%9A%E3%82%92%E5%A4%89%E3%81%88%E3%81%A6%E3%81%BF%E3%82%8B">いろいろ設定を変えてみる</a></h2> <p>色や形を変えるなどチャート自体の設定は、<br /> chart.jsの<a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/">公式ドキュメント</a>を見ていく感じっぽい。</p> <p>困ったら、公式ドキュメントをみれば、だいたい行けた感じ(<em>´ω｀</em>)<br /> ここからは、実際に使ってみた設定例を紹介。</p> <p>長いので、目次を見て好きなのを見るのがオススメ。</p> <h3 id="dataset関連"><a href="#dataset%E9%96%A2%E9%80%A3">dataset関連</a></h3> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/charts/">Charts · Chart.js documentation</a><br /> ここに載ってる、それぞれのグラフを見るといい感じ♪</p> <h4>線の色を変える: <code>borderColor</code></h4> <pre><code class="javascript"> private chartData: ChartData = { labels: ["A", "B", "C", "D", "E"], datasets: [ { label: "Data One", data: [1, 5, 3, 4, 3], borderColor: "green" // 線の色 }, { label: "Data Two", data: [10, 50, 30, 40, 30], borderColor: "red" } ] }; </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/9c199225-d605-26fa-8035-64f9d6a7f46e.png" alt="スクリーンショット 2019-09-21 18.15.50.png" /></p> <p>線の色を変えても、棒グラフの色は変わらない。。</p> <h4>塗りつぶしの色を変える: <code>backgroundColor</code></h4> <pre><code class="javascript"> private chartData: ChartData = { labels: ["A", "B", "C", "D", "E"], datasets: [ { label: "Data One", data: [1, 5, 3, 4, 3], borderColor: "green", // 線の色 backgroundColor: "rgba(0, 255, 0, 0.4)" // 塗りつぶしの色 }, { label: "Data Two", data: [10, 50, 30, 40, 30], borderColor: "red", backgroundColor: "rgba(255, 0, 0, 0.4)" } ] }; </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/7419cb4a-19f5-47a9-e2c0-1222c7a2dd70.png" alt="スクリーンショット 2019-09-21 18.18.09.png" /></p> <p>いい感じになったけど、折れ線グラフの場合は、点の背景色も変わるので、透過しないほうが良いかも。</p> <p>色関連の値には、rgbaも使える。</p> <h4>塗りつぶしをしない: <code>fill</code></h4> <pre><code class="javascript"> private chartData: ChartData = { labels: ["A", "B", "C", "D", "E"], datasets: [ { label: "Data One", data: [1, 5, 3, 4, 3], borderColor: "green", backgroundColor: "rgba(0, 255, 0, 0.4)", fill: false // 折れ線グラフの塗りつぶしを無効化 }, { label: "Data Two", data: [10, 50, 30, 40, 30], borderColor: "red", backgroundColor: "rgba(255, 0, 0, 0.4)", fill: false } ] }; </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/5965d143-2f58-f876-c84a-8c904448431a.png" alt="スクリーンショット 2019-09-21 18.19.33.png" /></p> <h4>線を真っ直ぐにする: <code>tension</code></h4> <pre><code class="javascript"> private chartData: ChartData = { labels: ["A", "B", "C", "D", "E"], datasets: [ { label: "Data One", data: [1, 5, 3, 4, 3], borderColor: "green", backgroundColor: "rgba(0, 255, 0, 0.4)", fill: false, tension: 0 // 線を真っ直ぐにする }, { label: "Data Two", data: [10, 50, 30, 40, 30], borderColor: "red", backgroundColor: "rgba(255, 0, 0, 0.4)", fill: false, tension: 0 } ] }; </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/75f69804-de7c-6996-5723-9a0a6368d035.png" alt="スクリーンショット 2019-09-21 18.20.41.png" /></p> <p>折れ線ぽっくなった(<em>´ω｀</em>)</p> <h4>折れ線グラフの点の大きさを変える: <code>radius</code> / <code>hoverRadius</code></h4> <pre><code class="javascript"> private chartData: ChartData = { labels: ["A", "B", "C", "D", "E"], datasets: [ { label: "Data One", data: [1, 5, 3, 4, 3], borderColor: "green", backgroundColor: "rgba(0, 255, 0, 0.4)", fill: false, tension: 0, radius: 8, // 点の大きさ hoverRadius: 20 // 点の大きさ(マウスホバー時) }, { label: "Data Two", data: [10, 50, 30, 40, 30], borderColor: "red", backgroundColor: "rgba(255, 0, 0, 0.4)", fill: false, tension: 0, radius: 8, hoverRadius: 20 } ] }; </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/362e525a-bf91-1fe9-cfe1-e58235dc739c.png" alt="スクリーンショット 2019-09-21 18.23.48.png" /></p> <h4>グラフを組み合わせる(複合グラフ): <code>type</code></h4> <pre><code class="javascript"> private chartData: ChartData = { labels: ["A", "B", "C", "D", "E"], datasets: [ { label: "Data One", data: [1, 5, 3, 4, 3], borderColor: "green", backgroundColor: "rgba(0, 255, 0, 0.4)", fill: false, tension: 0, radius: 8, hoverRadius: 20, }, { label: "Data Two", data: [10, 50, 30, 40, 30], borderColor: "red", backgroundColor: "rgba(255, 0, 0, 0.4)", fill: false, tension: 0, radius: 8, hoverRadius: 20, type: "line" // 折れ線グラフで表示 } ] }; </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/c191c6ea-341f-be05-127c-ee9ec8c0ac83.png" alt="スクリーンショット 2019-09-21 18.29.23.png" /></p> <p>Barのときにチャートの<code>type</code>を指定すると変更できる。</p> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/charts/mixed.html">Mixed · Chart.js documentation</a><br /> 参考: <a target="_blank" rel="nofollow noopener" href="https://qiita.com/kd9951/items/aece80abe0bd42b3b5d3">chart.js で複数軸の複合グラフを描く - Qiita</a></p> <h3 id="options関連"><a href="#options%E9%96%A2%E9%80%A3">options関連</a></h3> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/configuration/">Configuration · Chart.js documentation</a><br /> このあたりを見ていくといい感じ。</p> <p>それぞれの例がわかりくくいけど、このあたりに<code>option</code>のどこに書けばいいか書いてある。</p> <p><img width="800" alt="スクリーンショット_2019-09-21_19_15_19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/169fd02c-5828-18de-2f65-f5af4a4f7668.png"></p> <p>また、Y軸関連は、こっち。</p> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/axes/">Axes · Chart.js documentation</a></p> <h4>凡例の位置を変える: <code>legend</code></h4> <pre><code class="javascript"> private chartOption: ChartOptions = { maintainAspectRatio: false, legend: { position: "bottom" }, // 凡例の位置を変える } </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/40c5924f-89e3-f999-9c26-c6ea1a3644f3.png" alt="スクリーンショット 2019-09-21 18.34.32.png" /></p> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/configuration/legend.html">Legend · Chart.js documentation</a></p> <h4>折れ線グラフの点の大きさなどを全体で設定: <code>elements</code></h4> <pre><code class="javascript"> private chartData: ChartData = { labels: ["A", "B", "C", "D", "E"], datasets: [ { label: "Data One", data: [1, 5, 3, 4, 3], borderColor: "green", backgroundColor: "rgba(0, 255, 0, 0.4)" }, { label: "Data Two", data: [10, 50, 30, 40, 30], borderColor: "red", backgroundColor: "rgba(255, 0, 0, 0.4)", type: "line" } ] }; // チャートのオプション private chartOption: ChartOptions = { maintainAspectRatio: false, legend: { position: "bottom" }, elements: { point: { radius: 8, // 点の大きさ hoverRadius: 20 // 点の大きさ(マウスホバー時) }, line: { tension: 0, // 線を真っ直ぐにする fill: false // 折れ線グラフの塗りつぶしを無効化 } } }; </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/4c258ed8-30fd-a507-a765-f5d61b7375df.png" alt="スクリーンショット 2019-09-21 18.38.40.png" /></p> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/configuration/elements.html">Elements · Chart.js documentation</a></p> <h4>Y軸を2つにする: <code>scales.yAxes</code></h4> <pre><code class="javascript"> private chartData: ChartData = { labels: ["A", "B", "C", "D", "E"], datasets: [ { label: "Data One", data: [1, 5, 3, 4, 3], borderColor: "green", backgroundColor: "rgba(0, 255, 0, 0.4)" }, { label: "Data Two", data: [10, 50, 30, 40, 30], borderColor: "red", backgroundColor: "rgba(255, 0, 0, 0.4)", type: "line", yAxisID: "y-axis-2" // Y軸のIDを指定 } ] }; // チャートのオプション private chartOption: ChartOptions = { maintainAspectRatio: false, legend: { position: "bottom" }, elements: { point: { radius: 8, hoverRadius: 20 }, line: { tension: 0, fill: false } }, scales: { yAxes: [ { // 左の軸。設定はデフォルトのまま }, { id: "y-axis-2", position: "right" // 右に表示する } ] } }; </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/d43c6ab7-0ae1-0fc1-3d4d-01a74b71bd78.png" alt="スクリーンショット 2019-09-21 18.43.06.png" /></p> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/axes/">Axes · Chart.js documentation</a></p> <h3>Y軸のラベルを変える: <code>scales.yAxes.ticks</code></h3> <pre><code class="javascript"> private chartOption: ChartOptions = { maintainAspectRatio: false, legend: { position: "bottom" }, elements: { point: { radius: 8, hoverRadius: 20 }, line: { tension: 0, fill: false } }, scales: { yAxes: [ { ticks: { // 左の軸は、先頭に'¥'をつける callback: (label, index, labels) => "¥" + label.toLocaleString() } }, { id: "y-axis-2", position: "right", ticks: { // 右の軸は、末尾に'冊'をつける callback: (label, index, labels) => label.toLocaleString() + "冊" } } ] } }; </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/b9918ea8-982f-b453-ae63-424243606006.png" alt="スクリーンショット 2019-09-21 18.46.00.png" /></p> <p>ただ、このままだとホバーしたときのツールチップの値は変わらない。。<br /> 後述する<code>tooltips.callbacks.label</code>を使って変更が必要。</p> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/axes/">Axes · Chart.js documentation</a><br /> 参考: <a target="_blank" rel="nofollow noopener" href="https://blog.capilano-fw.com/?p=235">コピペでOK！Chart.js の数字を３桁カンマで表示する方法 – console dot log</a></p> <h3>横軸を非表示にする: <code>scales.yAxes.display</code></h3> <pre><code class="javascript"> private chartOption: ChartOptions = { maintainAspectRatio: false, legend: { position: "bottom" }, elements: { point: { radius: 8, hoverRadius: 20 }, line: { tension: 0, fill: false } }, scales: { yAxes: [ { ticks: { callback: (label, index, labels) => "¥" + label.toLocaleString() } }, { id: "y-axis-2", position: "right", display: false, // 右の軸を非表示にする ticks: { callback: (label, index, labels) => label.toLocaleString() + "冊" } } ] }, } </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/d4ec8fe1-73ca-27a1-5efd-690faefd13bc.png" alt="スクリーンショット 2019-09-21 18.57.45.png" /></p> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/axes/">Axes · Chart.js documentation</a></p> <h3>ホバー時のツールチップで両方表示にする: <code>tooltips.mode</code></h3> <pre><code class="javascript"> private chartOption: ChartOptions = { maintainAspectRatio: false, legend: { position: "bottom" }, elements: { point: { radius: 8, hoverRadius: 20 }, line: { tension: 0, fill: false } }, scales: { yAxes: [ { ticks: { callback: (label, index, labels) => "¥" + label.toLocaleString() } }, { id: "y-axis-2", position: "right", ticks: { callback: (label, index, labels) => label.toLocaleString() + "冊" } } ] }, tooltips: { // ツールチップの設定 mode: "index" // 全データを表示する } }; </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/57b8249c-2389-5860-a1b9-9904f733ae41.png" alt="スクリーンショット 2019-09-21 18.50.18.png" /></p> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/configuration/tooltip.html">Tooltip · Chart.js documentation</a></p> <h3>ツールチップの表示を変える: <code>tooltips.callbacks.label</code></h3> <pre><code class="javascript"> private chartOption: ChartOptions = { maintainAspectRatio: false, legend: { position: "bottom" }, elements: { point: { radius: 8, hoverRadius: 20 }, line: { tension: 0, fill: false } }, scales: { yAxes: [ { ticks: { callback: (label, index, labels) => "¥" + label.toLocaleString() } }, { id: "y-axis-2", position: "right", ticks: { callback: (label, index, labels) => label.toLocaleString() + "冊" } } ] }, tooltips: { // ツールチップの設定 mode: "index", callbacks: { label: function(tooltipItem, data) { // ラベルの表示変更 // データが'Data One'か'Data Two'かのインデックスを取得 const index = tooltipItem.datasetIndex; if (index === 0) { // 凡例にあるラベルを取得 var label = data.datasets[index].label || ""; if (label) label += ": "; // 該当データを取得して、先頭に'¥'をつける label += "¥" + tooltipItem.yLabel.toLocaleString(); return label; } else { var label = data.datasets[index].label || ""; if (label) label += ": "; label += tooltipItem.yLabel.toLocaleString() + "冊"; return label; } } } } }; </code></pre> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/cec3e36f-e681-9f8f-9085-e8d9b0428036.png" alt="スクリーンショット 2019-09-21 18.53.48.png" /></p> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/configuration/tooltip.html">Tooltip · Chart.js documentation</a><br /> 参考: <a target="_blank" rel="nofollow noopener" href="https://blog.capilano-fw.com/?p=235">コピペでOK！Chart.js の数字を３桁カンマで表示する方法 – console dot log</a></p> <h2 id="その他の便利関数"><a href="#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E4%BE%BF%E5%88%A9%E9%96%A2%E6%95%B0">その他の便利関数</a></h2> <h3 id="画面サイズを判定する"><a href="#%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E5%88%A4%E5%AE%9A%E3%81%99%E3%82%8B">画面サイズを判定する</a></h3> <p><code>window.matchMedia().matches</code>でメディアクエリがJavaScriptで使えるらしい。。<br /> 以下のような関数を作っておけば、</p> <pre><code class="javascript">private isDesktop() { return window.matchMedia("screen and (min-width:768px)").matches; } </code></pre> <p>画面サイズなどによって、</p> <ol> <li>横軸ラベルの表示/非表示を切り替えたり、</li> <li>適用するスタイルを変えたり、</li> <li>点の大きさを変えたり</li> <li>できる。</li> </ol> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://obel.hatenablog.jp/entry/20160626/1466937585">Chart.js でレスポンシブ指定をするとサイズが自由に変更できなくなる - 約束の地</a></p> <h3 id="カラーコードのHEXをRGBAに変換する"><a href="#%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AEHEX%E3%82%92RGBA%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B">カラーコードのHEXをRGBAに変換する</a></h3> <p>こんな感じで、HEXカラーコードとopacityからRGBAに変換できる。</p> <pre><code class="javascript">private convertHex(hex: string, opacity: number) { const arr = hex.replace("#", ""); const r = parseInt(arr.substring(0, 2), 16); const g = parseInt(arr.substring(2, 4), 16); const b = parseInt(arr.substring(4, 6), 16); return "rgba(" + r + "," + g + "," + b + "," + opacity + ")"; } </code></pre> <p>RGBで入力するのは大変なので、これがあると便利(<em>´ω｀</em>)<br /> こんな感じで使えます(<em>´ω｀</em>)</p> <pre><code class="javascript">{ label: "Data Two", data: [10, 50, 30, 40, 30], borderColor: "red", backgroundColor: this.convertHex("#FF0000", 0.4), } </code></pre> <p>参考: <a target="_blank" rel="nofollow noopener" href="https://jsfiddle.net/subodhghulaxe/t568u/">Hex 2 rgba converter - JSFiddle</a></p> <h2 id="おわりに"><a href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">おわりに</a></h2> <p><a target="_blank" rel="nofollow noopener" href="https://vue-chartjs.org/">vue-chartjs</a>をつかえば、<br /> TypeScriptなNuxt.jsでも簡単にいろんなグラフが表示できる(<em>´ω｀</em>)</p> <h2 id="こんなのつくってます!!"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E3%81%AE%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%21%21">こんなのつくってます!!</a></h2> <p>積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！<br /> <a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">積読ハウマッチ</a>は、Nuxt.js+Firebaseで開発してます!</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="200"/></p> <p>もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ</p> <p>こんな感じで、積読本・読了本の総数でどこまでいけるか表示したりしています♪</p> <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">なんかつけてる(*´ω｀*)月までは遠いので、まずは近いところから(*´ω｀*) <a target="_blank" rel="nofollow noopener" href="https://t.co/JMHoFbv5cg">pic.twitter.com/JMHoFbv5cg</a></p>— 積読ハウマッチ📚きらぷか (@kira_puka) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka/status/1175076203599785984?ref_src=twsrc%5Etfw">September 20, 2019</a></blockquote> <p>要望・感想・アドバイスなどあれば、<br /> 公式アカウント(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/MemoryLoverz">@MemoryLoverz</a>)や開発者(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka">@kira_puka</a>)まで</p> <h1 id="参考にしたサイト"><a href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88">参考にしたサイト</a></h1> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://vue-chartjs.org/">📈 vue-chartjs</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.chartjs.org/docs/latest/">Chart.js · Chart.js documentation</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/kattoon/items/a76caa684261956c900b">NuxtでChart.jsを利用する - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/mitsudaman/items/b30b5e905ff348bf35bc">Nuxt.js使って個人開発やってみた　〜時間割を円グラフで表示するサービスをリリースした話〜 - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/muramasawani/items/6086ecfcb92034774599">vue-chartjs馴れ初め - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/is_ryo/items/1609dcee76aa5df93e2a">Vue.js(ts)でvue-chartjsを使う - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/kd9951/items/aece80abe0bd42b3b5d3">chart.js で複数軸の複合グラフを描く - Qiita</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://obel.hatenablog.jp/entry/20160626/1466937585">Chart.js でレスポンシブ指定をするとサイズが自由に変更できなくなる - 約束の地</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://jsfiddle.net/subodhghulaxe/t568u/">Hex 2 rgba converter - JSFiddle</a></li> </ul> きらぷか@積読ハウマッチ/SSSAPIなど