#javascript #vue.js #highcharts #vuejs2 #vue-component
#javascript #vue.js #высокие диаграммы #vuejs2 #vue-компонент
Вопрос:
Я только начинаю работать с VueJS и пытаюсь создать очень простую страницу, на которой показана круговая диаграмма с некоторыми данными.
Прямо сейчас мне удалось отобразить диаграмму, используя данные примера, но теперь я хотел бы заполнить диаграмму данными, полученными из вызова api на моем сервере http://127.0.0.1:8000/user/getamount
.
Вот мой код:
chart.js
import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App from './App.vue'
import HighchartsVue from "highcharts-vue";
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;
Vue.use(HighchartsVue);
Vue.use(VueAxios, axios)
new Vue({
el: "#app",
render: h => h(App),
});
App.vue
<template>
<div>
<highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
</div>
</template>
<script>
export default {
data() {
return {
chartOptions: {
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 76.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}],
}
};
}
};
</script>
Я только начал работать с Vue, поэтому многое еще не ясно, но где я должен выполнить запрос API здесь? Я видел много примеров, когда axios используется для вызова API и отображения данных на странице, но в этом случае мне нужны данные о моем компоненте, поскольку диаграмма там есть. Должен ли я просто выполнить вызов из компонента? Или я что-то упускаю? Приветствуются любые советы
Комментарии:
1. Наряду с вашим
data()
добавьте хук, подобныйmounted() {}
вызову API внутри него
Ответ №1:
Поскольку вы все равно будете загружать данные, определите их, но запустите переменную null
:
series: [{
type: 'pie',
name: 'Browser share',
data: null
}],
В created
(помечено как async
для шаблона async / await) загрузите данные с помощью axios
:
import axios from 'axios';
export default {
data() {
...
},
async created() {
const response = await axios.get(...); // Load the data from your api url
this.chartOptions.series[0].data = response.data; // set the data
// `response.data` should contain:
/*
[
['Firefox', 45.0],
['IE', 76.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
*/
}
}
Вот песочница, имитирующая это с помощью setTimeout
Комментарии:
1. Большое спасибо! Кажется, это лучшее решение
Ответ №2:
import axios from 'axios';
data () {
return {
getAmount: []
}
},
methods: {
fetch() {
axios.get('https://127.0.0.1:8000/user/getamount')
.then((response) => {
this.getAmount = response.data;
})
}
},
mounted() {
this.fetch();
}
})
Если вы хотите отобразить его в html, то вы создаете цикл.
<div v-for="amount in getAmount" :key="amount.id">
{{amount}}
</div>
Ответ №3:
Вы можете просто определить функцию в своем новом компоненте, которой нужны данные при загрузке. Так что да, в случае вашего компонента диаграммы вы могли бы сделать запрос Axios там. Итак, тогда часть сценария будет выглядеть следующим образом.
<script>
import axios from 'axios';
export default {
data () {
return {
graph_data: [],
}
},
created () {
this.fetchGraphData()
},
methods: {
fetchGraphData() {
axios.get('your_address')
.then(function (response) {
//Fill your data here
})
}
}
</script>