質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

Q&A

解決済

1回答

1295閲覧

axiosで取得したデータをvue-chartjsで描画したい

kotarofunyu

総合スコア23

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

0グッド

0クリップ

投稿2020/02/11 05:49

お世話になっております。

実現したいこと

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。
回答を得られなかったので、やはり、かなりマイナーなことをしようとしてたんでしょうか僕は...

投稿2020/02/13 05:02

kotarofunyu

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問