问题
I am new to Vuejs and i wanna know how to fetch data from my API to display chart.
Below is my code, where i have used data as "date and challenge" and have fed data directly to it, but now i want to call my API and feed the data from it to "date and challenge".
Code that i have used it to display chart without API:
<template>
<canvas id="mychart" width="550" height="300"></canvas>
</template>
<script>
export default {
name: 'Chart',
data: () => ({
date: [
1600934100.0,
1602009600.0,
1602747060.0,
1603050158.390939,
1603305573.992575
],
challenge: [
9.0,
9.5,
2.5,
11.52,
12.4
]
}),
mounted () {
// eslint-disable-next-line no-unused-vars
const data = this.date.map((date, index) => ({
x: new Date(date * 1000),
y: this.challenge[index]
}))
const ctx = document.getElementById('mychart').getContext('2d')
// eslint-disable-next-line no-undef,no-unused-vars
const Chart_2 = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
data,
label: 'Chart from API ',
borderColor: '#7367F0'
}
]
},
options: {
scales: {
xAxes: [
{
type: 'time',
time: {
unit: 'month',
displayFormats: {
month: 'MMM YYYY'
}
}
}
],
yAxes: [
{
ticks: {
// eslint-disable-next-line no-unused-vars
callback (value, index, values) {
return `${value }%`
}
}
}
]
}
}
})
}
}
</script>
I know to get API we use 'axios' or 'fetch' , so whenever i get API and just do console.log(response.data) i will get my data in the console in my browser, but further i dont know to map it and use those data to feed "date and chalenge" in order to display chart.
Here is my API:
My API which contains data in it: https://api.wirespec.dev/wirespec/stackoverflow/fetchchartdataforvuejs
Please someone help me to display chart by using my API in my code.
回答1:
have you tried like this one?
solution 1
Add async/await so it will wait until the data get populated to data and challege.
async mounted () {
let result = await axios.get('https://api.wirespec.dev/wirespec/stackoverflow/fetchchartdataforvuejs')
this.date = result.data.date
this.challenge = result.data.challenge
// eslint-disable-next-line no-unused-vars
const data = this.date.map((date, index) => ({
x: new Date(date * 1000),
y: this.challenge[index]
}))
const ctx = document.getElementById('mychart').getContext('2d')
// eslint-disable-next-line no-undef,no-unused-vars
const Chart_2 = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
data,
label: 'Chart from API ',
borderColor: '#7367F0'
}
]
},
options: {
scales: {
xAxes: [
{
type: 'time',
time: {
unit: 'month',
displayFormats: {
month: 'MMM YYYY'
}
}
}
],
yAxes: [
{
ticks: {
// eslint-disable-next-line no-unused-vars
callback (value, index, values) {
return `${value }%`
}
}
}
]
}
}
})
}
or in another way, you can fetch the data from API in other component and send date and challege as props to this component.
solution 2
I assume you have chart component chart.vue
chart.vue
<template>
<canvas id="mychart" width="550" height="300"></canvas>
</template>
<script>
export default {
name: 'Chart',
props: ['date', 'challenge],
data: () => ({
}),
mounted () {
// eslint-disable-next-line no-unused-vars
const data = this.date.map((date, index) => ({
x: new Date(date * 1000),
y: this.challenge[index]
}))
const ctx = document.getElementById('mychart').getContext('2d')
// eslint-disable-next-line no-undef,no-unused-vars
const Chart_2 = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
data,
label: 'Chart from API ',
borderColor: '#7367F0'
}
]
},
options: {
scales: {
xAxes: [
{
type: 'time',
time: {
unit: 'month',
displayFormats: {
month: 'MMM YYYY'
}
}
}
],
yAxes: [
{
ticks: {
// eslint-disable-next-line no-unused-vars
callback (value, index, values) {
return `${value }%`
}
}
}
]
}
}
})
}
}
</script>
and in other component, import your chart.vue
<template>
<div>
<Chart v-if="!isLoading" :date="date" :challenge="challenge" />
</div>
</template>
<script type="text/javascript">
import Chart from 'PATH TO chart.vue'
export default {
components: {
Chart
},
data () => ({
date: [],
challenge: [],
isLoading: false
}),
methods: {
async getData () {
this.isLoading = true
let result = await axios.get(API URL)
this.date = result.data.date
this.challenge = result.data.challenge
this.isLoading = false
}
},
mounted () {
this.getData()
}
}
</script>
In chart.vue, delete date and challege from data because you will have props, for the best practice props and data cannot have same property name.
In other component where chart.vue get imported, just fetch the data as usual.
Things I did when I was using chartjs for my project, I always add v-if in , it will let the axios fetch the data first and then re-mount the chart component. Because I guess chartjs is not reactive on vuejs data changes, so will need to update the data first then re-mount again.
回答2:
Finally, I got the answer Hoorah!
I am sharing, how I did it even you can do the same in order to visualize chart with your API data.
<template>
<div class="chart-container" style="position: relative; height: 25vh; width:100%;">
<canvas id="DisplayChart" ></canvas>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: 'Chart_from_API',
data () {
return {
myChart: []
}
},
async mounted () {
await this.$http.get('https://api.wirespec.dev/wirespec/stackoverflow/fetchchartdataforvuejs') //Your API has to be given here
.then((response) => {
const result = response.data
const ctx = document.getElementById('DisplayChart').getContext('2d')
const Chart_data = []
for (let i = 0; i < result.date.length; i++) {
Chart_data.push({
x_axis: moment(result.date[i], 'X').toDate(), //To Convert Unix Timestamp into Date
y_axis: result.challenge[i]
})
}
// eslint-disable-next-line init-declarations,prefer-const
let myChart
if (myChart !== undefined) {
myChart.destroy()
}
// eslint-disable-next-line no-undef
myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'Chart_from_API',
data: Chart_data,
borderColor: '#EA5455',
lineTension: 0
}
]
},
options: {
lineTension: 0,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
yAxes: [
{
scaleLabel: {
display: false
},
ticks: {
beginAtZero: true,
// eslint-disable-next-line no-unused-vars
callback (value) {
return `${value }k` // y-axis value will append k to it
}
}
}
],
xAxes: [
{
type: 'time',
time: {
unit: 'month'
},
scaleLabel: {
display: true,
labelString: ''
}
}
]
}
}
})
})
.catch((error) => {
console.log(error)
})
}
}
</script>
来源：https://stackoverflow.com/questions/65382298/how-to-get-data-from-api-to-display-chart-using-chartjs-in-vuejs