Я новичок в Vuejs и хочу знать, как получать данные из моего API для отображения диаграммы.
Ниже приведен мой код, где я использовал данные как «дата и вызов» и передал данные непосредственно в него, но теперь я хочу вызвать свой API и передать данные из него в «дату и вызов».
Код, который я использовал для отображения диаграммы без 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>
Я знаю, что для получения API мы используем «axios» или «fetch», поэтому всякий раз, когда я получаю API и просто делаю console.info(response.data), я получаю свои данные в консоли в моем браузере, но дальше я не знаю, чтобы сопоставить его и используйте эти данные для подачи «даты и задачи», чтобы отобразить диаграмму.
Вот мой API:
Мой API, который содержит данные: https://api.wirespec.dev/wirespec/stackoverflow/fetchchartdataforvuejs
Пожалуйста, помогите мне отобразить диаграмму, используя мой API в моем коде.
вы пробовали такой?
решение 1
Добавьте async/await
, чтобы он ждал, пока данные не будут заполнены data
и 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 }%`
}
}
}
]
}
}
})
}
или по-другому, вы можете получить данные из API в другом компоненте и отправить date
и challege
в качестве реквизита этому компоненту.
решение 2
Я предполагаю, что у вас есть компонент диаграммы chart.vue
диаграмма.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>
а в другом компоненте импортируйте ваш 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>
В chart.vue удалите date
и challege
из data
, потому что у вас будет props
, а для лучшей практики props
и data
не могут иметь одинаковое имя свойства.
В другом компоненте, куда импортируется chart.vue, просто извлеките данные как обычно.
То, что я делал, когда использовал chartjs для своего проекта, я всегда добавлял v-if
в , это позволит аксиомам сначала извлекать данные, а затем повторно монтировать компонент диаграммы. Поскольку я предполагаю, что chartjs не реагирует на изменения данных vuejs, поэтому сначала нужно будет обновить данные, а затем снова смонтировать.
убедитесь, что у вас нет проблем с cors, я попробовал это на codeandbox и получил ошибку cors
Я попробовал второе решение, но на диаграмме ничего не отображалось, и в консоли также нет ошибки, не знаю, что мне теперь делать, я пробовал разные способы ее решения, но не смог отобразить диаграмму из API
он работал со статическими данными без API?
попробуйте использовать этот vue-chartjs.org/guide/#example
Я попробовал это, но это не сработало, не знаю, где я ошибаюсь, но я могу консольно регистрировать свой API и видеть свои данные в окне консоли. Не могли бы вы дать мне другое решение, я могу видеть свою диаграмму, но мои данные из API не отображаются на диаграмме. Пожалуйста, помогите мне решить это, я застрял с этим.
Спасибо, @kusiaga, за ваши усилия, я получил ответ из вашего решения 1, но мне пришлось внести некоторые изменения, чтобы получить результаты.
пожалуйста, проверьте мой codeandbox codeandbox.io/s/friendly-leakey-e7pip?file=/src/components/… . поскольку у меня проблемы с корсом, предположим, что add data
вызывает API. в целом он должен работать с API
Наконец-то я получил ответ Ура!
Я делюсь тем, как я это сделал, и вы можете сделать то же самое, чтобы визуализировать диаграмму с данными вашего API.
<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.info(error)
})
}
}
</script>
Спасибо за ваш ответ, я пробовал это и раньше, но даже это не работает, если я сделаю так, я получаю сообщение об ошибке vue.runtime.esm.js?2b0e:619 [Vue warn]: Ошибка в смонтированном хуке ( Обещание/асинхронность): «Ошибка типа: невозможно прочитать свойство «0» неопределенного». Скажите, пожалуйста, есть ли другой способ, которым я могу отобразить свою диаграмму из API. И не могли бы вы также сказать мне, что должно быть указано в данных () => ({ date: '?' challenge: '?' )}, потому что в наборах данных, которые я указал, есть «данные»