2.6.10Vue.js公式サイトの「SVGグラフの例」は、SVGでレーダーチャートを描き、値がスライダで動的に操作できます。データを新たに加えたり除いたりすることも可能です。6)の構文で書いてみましょう。公式作例をどう手直ししたかについては、「Vue.js公式サイトの『SVGグラフの例』を改善する」をお読みください。SVGで円を描くVue.jsのライブラリはCDNから読み込んでおきます。本稿執筆時の最新バージョンは2.6.10です。src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>まず、SVGで描くのは円です。<circle>要素に、属性として中心のxy座標と半径を定めます。r=半径></circle>円の中心のxy座標と半径のデータは、つぎのようにオブジェクトのプロパティとして変数(circle)に与えておきます。アプリケーションをコンポーネントに分ける」参照)。=>vm.$mount('#demo'));<body>要素はアプリケーションの要素(id属性demo)は、SVG要素の中にコンポーネントの要素(polygraph)を加え、円のデータ(circle)をv-bindディレクティブ(省略記法:)でバインディングしておきます。これでコンポーネントは、propsにデータが受け取れるのです。:circle="circle"></polygraph></svg></div>コンポーネント(polygraph)のテンプレートは、円のデータ(circle)から中心のxy座標と半径を得て<circle>要素の属性にそれぞれバインディングすれば円が描かれます(図001)。<circle>要素には、以下のスタイルを与えました。SVGで正六角形のレーダーチャートを描くつぎにSVGで描くのは、レーダーチャートとなる多角形です。正六角形からはじめましょう。コンポーネントのテンプレートには、多角形を描く<polygon>要素を加えます。バインディングしたのは、頂点座標を与えるpoints属性です。:points="points"></polygon></g></script><polygon>要素のpoints属性には、多角形の頂点のxy座標を順に区切り文字でつなげます。区切り文字に用いるのは、カンマ(,)か半角スペースです。座標xとyの間にカンマ、つぎの頂点座標との間にはスペースを入れる場合が多いようです。最後の頂点は、最初の頂点と結ばれて閉じた多角形ができあがります。つぎのコードは、図002のような六角形を描きます。sinθ)で表されます(図003)。sinθ)になるということです(「三角関数のsinとcosの定義」参照)。図003■三角関数のsinとcosで半径1の円周上の座標を表すそこで、多角形の頂点座標が返される関数(valueToPoint())を以下のJavaScriptコードのように定めます。引数は3つで、(1)円周までの長さを100としたパーセンテージ、(2)0からはじまる頂点番号、(3)多角形の頂点数です。頂点のxy座標をプロパティに納めたオブジェクトが返されます。ty};}レーダーチャートのデータはつぎのように変数(stats)に定めます。アプリケーションのdataに加えて、コンポーネントのpropsが受け取り、computedの算出プロパティ(points())から<polygon>要素のpoints属性に頂点座標データをバインディングするという組み立てです(前掲テンプレートpolygraph-template参照)。6件のパーセンテージ(value)がすべて100なので、かたちは正六角形になります。stats,}});レーダーチャートのデータ(stats)は、コンポーネントが受け取れるよう、つぎのようにバインディングしておかなければなりません。:circle="circle"></polygraph></svg>これで、円周上の頂点を結んで。正六角形のレーダーチャートが描かれます(図004)。<style>要素の定めは、あとにコード001としてまとめました。レーダーチャートのデータ表示とスライダコントロールレーダーチャートのデータ(stats)は、中身が確かめられるようページに表示します(図005)。これはつぎのように、アプリケーションの要素(id属性demo)に新たな要素(id属性raw)を加えて、データバインディングするだけです。<style>要素の定めについては、後掲コード001をご覧ください。id="raw">{{stats}}</pre></div>図005■レーダーチャートのデータが示されたレーダーチャートのデータ(stats)のパーセンテージ(valueプロパティ)の値は、スライダで変えられるようにします。type="range">です。v-forディレクティブで、つぎのようにラベル(labelプロパティ)とパーセンテージ(valueプロパティ)を要素のテキストにバインディングし、さらにパーセンテージは<input>要素のv-modelディレクティブに定めます。すると、スライダの操作でパーセンテージの値が変わるようになるのです(図006)。ここまでを、以下のコード001にまとめました。併せて、コードの動きが確かめられるように、CodePenにサンプル001を掲げてあります。レーダーチャートにラベルを加えるレーダーチャートのSVGにデータラベルのテキストを加えましょう。ラベルもコンポーネント(axis-label)にして、レーダーチャート(polygraph)の子として定めます。ローカルコンポーネントを定める」参照)。テキストの位置は、算出プロパティ(point())から前掲座標を求める関数(valueToPoint())を呼び出して与えます。スライダから渡されるパーセンテージの値(value)は文字列なので、数値として扱いたいときは変換しなければなりません。加算演算子+を前に添えるのはそのやり方のひとつです。10,this.index,this.total);}}}}});レーダーチャートコンポーネントのテンプレートには、v-forディレクティブでラベルコンポーネント(axis-label)の要素を差し込みます。バインディングするのは、ラベルの座標を求めるために前掲算出プロパティ(point())で用いられる値です。ラベルコンポーネントのテンプレートは、<text>要素でラベル(label)のテキストをバインディングし、算出プロパティから位置座標を得て、xおよびy属性にバインディングで与えます。これで、レーダーチャートの各頂点にデータラベルがテキストで示されます(図007)。レーダーチャートに新たなデータを加えるレーダーチャートに新たなデータが加えられるようにしましょう。アプリケーションに、新たなメソッド(add())をつぎのように定めます。追加データのラベル(label)に与えるのは、v-modelディレクティブでバインディングした<input>要素の入力文字列(newLabel)です。メソッドはボタン(<button>要素)のclickイベントに定めるので、引数にイベントオブジェクト(event)を受け取ります。Event.preventDefault()メソッドを呼び出すのは、ページの再読み込みを避けるためです。id="raw">{{stats}}</pre></div>これで、入力フィールドに打ち込んだテキストが、ボタンクリックでラベルとしてレーダーチャートに加わります(図008)。レーダーチャートからデータを除くレーダーチャートに入っているデータを、除くこともできるようにしましょう。スライダの右に[X]ボタン(<button>要素)を添え、クリック(clickイベント)したら削除のメソッド(remove())を呼び出します。引数(stat)に受け取るのは、削除するデータです。5.1で備わったArray.filter()メソッドは、引数の関数が定める条件に合った要素からなる新たな配列を返します。削除する要素以外というのがその条件です。データは3つ以上ないと多角形が描けません。それより少なくしようとすると、警告のダイアログが示されます。class="remove">X</button></div></div>これで、レーダーチャートから、削除ボタン[X]でデータが除けるようになりました(図009)。JavaScriptコードと<body>要素およびテンプレートの記述を、以下のコード002にまとめます。コードの動きは、CodePenに掲げたサンプル002でお確かめください。v-forディレクティブにはkeyを定めるもうひとつだけ手を加えます。前掲コード002を開発用のVue.jsで試すと、コンソールにつぎのような警告が示されます。これは、v-forディレクティブを定めた要素には、key属性を与えなければならないということです(「キー付きv-for」参照)。属性値は一意とします。info.そこで、レーダーチャートのデータに一意のプロパティ(id)を加えます。いちいち手打ちせず、Array.map()メソッドでインデックスの値を与えることにしましょう。このメソッドは、引数の関数が返した要素からなる新たな配列をつくります。関数が受け取る引数は、参照したもとの配列の要素とインデックスです。<body>要素とテンプレートのv-forディレクティブを定めた要素には、一意のプロパティ値をkey属性に与えます。key属性はバインディングするため、v-bindディレクティブ(省略記法:)を添えました。stats":key="stat.id"></axis-label></g></script>データを加えるときも、一意のプロパティ値を与えましょう。新しいプロパティ値を返すメソッド(getNewId())は、つぎのように定めます。Array.map()メソッドですでに割り当てられている値を取り出し、Math.max()メソッドにより最大値を得て1加えれば新たな値です。使ってみる」の「スプレッド構文」参照)。1;}}});これで、コンソールの警告は出なくなります。レーダーチャートの動きそのものは変わりません。データのプロパティ(id)を増やしましたので、新たにその値が表示の中に加わりました(図010)。書きあがったコードを、改めてすべて示すのも冗長です。CodePenに以下のサンプル003を掲げました。