お世話になっております。
実現したいこと
vue-chartjsを使って、axiosで取得したデータをグラフで描画したいと思っています。
0. axiosでバックのRails APIを叩いて、データを取得する。
0. 取得したデータをvue-chartjsのdataプロパティに渡す
0. vue-charjsで描画する
大まかな流れはこのような感じです。
詰まっているところ
上の流れにおいて、1はできているんですが、2のやり方が分からない状態です。
APIを叩いて、vue-chartjsでデータを描画するというようなサンプルがネット上になかなか存在せず、苦戦しています。ご教授のほど、宜しくお願い致します。
コードは以下のような形です。
Javascript
1<template> 2 <MainChart class="chart" :chartData="dataContents"/> 3</template> 4 5<script> 6 import axios from 'axios' 7 import MainChart from '../bar-chart.js'; 8 export default { 9 data () { 10 return { 11 dataContents: null 12 } 13 }, 14 created() { 15 this.fillData() 16 }, 17 methods: { 18 fillData() { 19 this.dataContents= { 20 labels:['January', 'February', 'March'], 21 datasets: [ 22 { 23 label: 'Data reactive', 24 backgroundColor: '#f8b979', 25 data: this.setSample() 26 } 27 ] 28 } 29 }, 30 setSample () { 31 //var arry = [79.5, 80, 85]; 32 //return arry; 33 axios.get('http://localhost:3000/api/training_record/') 34 .then(function (response) { 35 var records = response.data.training_record.record 36 var weight1 = records[0].event[0].set[0].weight 37 console.log(weight1) 38 return weight1 39 }) 40 } 41 }, 42 components: { 43 MainChart, 44 } 45 } 46</script>
Javascript
1import { Bar } from 'vue-chartjs' 2export default { 3 extends: Bar, 4 props: ['chartData', 'options'], 5 mounted () { 6 this.renderChart(this.chartData, this.options) 7 } 8}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。