[英]Vuejs with ChartJS populate from API
How can I populate my chart with the data from my API 如何使用API中的数据填充图表
<script>
import VueCharts from 'vue-chartjs'
import { Pie, Bar } from 'vue-chartjs'
import axios from 'axios'
export default {
data() {
return {
dailyLabels: [] ,
dailyData: []
}
},
extends: Bar,
mounted() {
// Overwriting base render method with actual data.
this.renderChart({
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday ', 'Friday', 'Saturday', 'Sunday'],
datasets: [
{
label: 'Daily Students',
backgroundColor: '#f87979',
data: [12, 20, 1, 50, 10, 40, 18]
}
]
})
},
created() {
axios.get(`https://localhost:44379/api/DailyStudents`)
.then(response => {
// JSON responses are automatically parsed.
this.dailyData = response.data.days
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
MY Api returns This: MY Api返回:
[ {"day":"Wednesday","totalStudents":"21"}, {"day":"Tuesday","totalStudents":"2"}, {"day":"Thursday","totalStudents":"20"}, {"day":"Friday","totalStudents":"23"} ]
Days should be my Label and totalStudents my data 天应该是我的标签,学生应该是我的数据
the chart should show of course the number of students by day, but the examples that I found are a little bit confusing. 图表当然应该显示每天的学生人数,但是我发现的例子有些令人困惑。
You can use Array.map
to extract necessary data. 您可以使用Array.map
提取必要的数据。
<script>
import VueCharts from 'vue-chartjs'
import { Pie, Bar, mixins } from 'vue-chartjs'
import axios from 'axios'
export default {
mixins: [mixins.reactiveData],
data() {
return {
chartData: ''
}
},
extends: Bar,
mounted() {
this.renderChart(this.chartData)
},
created() {
axios.get(`https://localhost:44379/api/DailyStudents`)
.then(response => {
// JSON responses are automatically parsed.
const responseData = response.data
this.chartData = {
labels: responseData.map(item => item.day),
datasets: [
label: 'Daily Students',
backgroundColor: '#f87979',
data: responseData.map(item => item.totalStudents)
]
}
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
Note that you need to use mixins.reactiveData
to make component reactive with data change. 请注意,您需要使用mixins.reactiveData
来使组件响应数据更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.