HatenaPocketLINELINE計算シミュレーションに付加機能を追加しようと考えて、円グラフによる金額の割合を表示する機能を追加することにしました。どのくらいの割合なのかを視覚的にわかるようにし、それに伴い純利益の計算も行うようにしました。収入と経費を入力するだけで自動計算します。追加の操作は必要ありません。数値を変更し、各種金額が再計算されるタイミングで円グラフも再描画します。表示箇所は、計算結果の下です。Vue.jsで円グラフをどのように実装したかの解説です。興味のある方はご参考ください。ちなみに、円グラフ表示には超定番の「Chart.js」を使用してます。Vue.jsでchart.jsを使う方法Chart.jsを直接使用してもいいのですが、リアクティブデータとの連動や描画タイミング等を考慮する必要がでてくるので、「vue-chartjs」プラグインを使いました。導入はいつも通り、npmでインストールするだけ。--savevue-chartjsの実装方法ほぼドキュメント通りに進めるだけで簡単に円グラフが実装できます。使いたいグラフ用のコンポーネントを個別に作っていく方法みたいなので、円グラフ用のコンポーネントを作成します。グラフの描画を行います。グラフのタイトルや大枠のレイアウト部等のオプション各数値が変わるタイミングで再描画してもらいたいので、監視プロパティ(watch)でpropsが変更になったらrenderChartを呼び出しています。}}</script>chartDataは特に説明すべきところはないです。chart.jsやvue-chartjsのドキュメント通りに、円グラフに表示したいデータを作成しています。改修した点は、グラフのオプション用データ生成部のchartOptionsでツールチップのコールバックを指定している箇所です。数値をカンマ区切りで表示したかったので、ツールチップ用のラベルを手作業で生成しています。ちなみにFormat.numberFormatは、別途カンマ区切りをする関数を作成しており、標準機能ではありません。これだけで、簡単に円グラフの表示ができるようになりました。ありがたや、ありがたや。あとがき2019年になり、いよいよ初めての確定申告が近づいてまいりました。シミュレーション】復興特別所得税の計算に対応しました所得税の計算に復興特別所得税が含まれていなかったため対応しました。計算機を作ってみた私は、今年からフリーランスでお仕事をさせていただいています。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスウェブサイトプロフィール福岡でシステムエンジニアをやっています。フリーランスで活動中です。PHP・C#メインにWebシステムやサーバサイド、サーバ構築等が得意です。