Chart.jsのグラフをvue.jsを使って書いてみた�2

Chart.jsのグラフをvue.jsを使って書いてみた�2:

Chart.jsのグラフをvue.jsを使って書いてみた1

前回作ったもの
https://jsfiddle.net/dqnsan/5zrf6whv/

これ見直して思ったけど全くvue.jsを活かしてなくて草

今回からちゃんとするから、、、

というわけで、

ここにボタンを押下したら要素が追加されるようにしていきます。

inputの追加

グラフは

・label

・backgroundColor

・data

の三つで出来ているので

それぞれを追加する処理を書いていきます。

vueのdataに下記を追加

        data: { 
            nameSet: 'ビタミンZ', 
            numSet: 10, 
            colorSet: '#FFFF00', 
            chartLists: [ 
                { name: 'たんぱく質' ,color: '#2ecc71', data: 10 }, 
                { name: '炭水化物' ,color: '#3498db', data: 30 }, 
                { name: 'ビタミンA' ,color: '#95a5a6', data: 3 }, 
                { name: 'ビタミンB' ,color: '#9b59b6', data: 17 } 
            ] 
        }, 

そしてやっとvueらしいことをしていきます。

inputをhtmlに追加して「v-model」でデータバインディングをする。

    <form> 
        <label> 
            栄養名<input type="text" name="" v-model="nameSet" placeholder="例)ビタミンA"> 
        </label> 
        <label> 
            数値<input type="number" name="" v-model="numSet"> 
        </label> 
        <input type="color" name="" value="" v-model="colorSet"> 
        <input type="button" value="追加"> 
    </form> 

これはブラウザによって使えないことあるのでchromeで見てね！

<input type="color" name="" value="" v-model="colorSet"> 

これでvueに追加したdataの中身が各種inputに入るようになりました。

ブラウザ上でinputの値を変更したらdataの中の値も変わりますね。

それではグラフに追加する処理を書いていきます。

            addChartList: function () { 
                //forEachの中ではthisの対象が変わるためselfを使う 
                self = this; 
 
                //configの中にinputへ入力して値をpush 
                config.data.labels.push(this.nameSet); 
                config.data.datasets.forEach(function (dataset) { 
                    dataset.backgroundColor.push(self.colorSet); 
                    dataset.data.push(self.numSet); 
                }); 
 
                //Chart.jsに存在するupdate関数を使用 
                chart.update(); 
 
                //グラフに追加したらinputを初期状態に戻す 
                this.nameSet = 'ビタミンZ'; 
                this.numSet = 10; 
                this.colorSet = '#FFFF00'; 
            } 

そしてhtmlにclickしたらイベントが発火するように追加

        <input type="button" value="追加" @click="addChartList()"> 

こんな感じでしょうか？

vueじゃなかったら「addChartList」の引数に値を渡して追加する感じだと思います。

今回の結果
https://jsfiddle.net/dqnsan/5zrf6whv/6/

次回はバリデートか削除の追加かな、、、