下記のようにchart.jsでグラフを書きたいのですがfirebaseのuser/notes/contentsのみを配列で取得してdataに代入するコードがうまく書けなくて困っています。。。。
firebaseから下記コードで数字を取得し、this.notesに配列を入れています。
created: function() { firebase .database() .ref('notes/' + this.user.uid) .once('value') .then(result => { if (result.val()) { this.notes = result.val(); } })
この配列を
var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], datasets: [{ label: 'apples', data: /*ここにnotesのcontentプロパティを展開したい*/, backgroundColor: "rgba(153,255,51,0.4)" },
chart.jsのdataにcontentsプロパティのみを入れたいと考えています。その際の良いコードが思いつかず困っています。
全体
<template> 上記省略 <canvas id="myChart"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], datasets: [{ label: 'apples', data: /*ここにnotesのcontentプロパティを展開したい*/, backgroundColor: "rgba(153,255,51,0.4)" }, { label: 'oranges', data: [2, 29, 5, 5, 2, 3, 10], backgroundColor: "rgba(255,153,0,0.4)" }] } }); </script> </div> </template> <script> import firebase from '@/plugins/firebase' import { mapState } from 'vuex' export default { name: 'mypage', props: ['user'], data (context) { // コンポーネントをロードする前に毎回呼び出されます return { note_content: 'hello', notes:[]} }, // DOMが作成されたときに値を代入する created: function() { firebase .database() .ref('notes/' + this.user.uid) .once('value') .then(result => { if (result.val()) { this.notes = result.val(); } }) }, computed: { ...mapState({ mypageUrl: (state) => `/user/${state.uid}` }) }, methods: { saveContent: function(value) { // 新しいテキストのためのキーを取得 var newNoteKey = firebase.database().ref().child('notes').push().key; var today = Date.now(); firebase .database() .ref('notes/' + this.user.uid + '/' + newNoteKey) .set({content:value,date:today}); } } } </script>
回答1件
あなたの回答
tips
プレビュー