Как передать значения в график ( библиотека Chart.js )?
Мне нужно передать значения в график используя данные которые я получаю из API. Как я понял, нужно просто передать полученные значения в одном объекте. Поясните пожалуйста что не так и как нужно это делать? Сам сайт https://www.chartjs.org/docs/latest/charts/line.html
пример того как я пытаюсь передать данные в объект и потом уже его использовать.
key = fullDataList[5]["chart"]["y_struct"]
value = fullDataList[5]["chart"]["x"],
result = {},
key.forEach((key,i) => result[key] = value[i]);
Код:
store.js Откуда я получаю данные
import { createStore } from 'vuex'
import axios from 'axios'
let store = createStore({
state() {
return {
maturityList: [],
maturity: null,
underlying: null,
amount: null,
futHedgeFlag: false,
fullDataList: null,
}
},
mutations: {
setMaturityList_mutations(state, maturityList) {
state.maturityList = maturityList
},
setMaturity_mutations(state, maturity) {
state.maturity = maturity
},
setUnderlying_mutations(state, underlying) {
state.underlying = underlying
},
setAmount_mutations(state, count) {
state.amount = count
},
setFlagFutures_mutations(state, flag) {
state.futHedgeFlag = flag
},
setFullData_mutations(state, data) {
state.fullDataList = data
}
},
actions: {
getMaturity_actions({ commit }, underlying) {
return new Promise(( resolve, reject) => {
axios({ url: 'http://localhost:5000/maturities', params: {currency: underlying}, method: 'GET'})
.then(resp => {
const data = resp.data.data[underlying]
commit('setMaturityList_mutations', data)
resolve(resp)
})
.catch(resp => {
reject(resp)
})
})
},
getStatisctics_actions({ commit }) {
return new Promise(( resolve, reject) => {
axios({ url: 'http://localhost:5000/recStructs', params: {currency: this.state.underlying, maturity: this.state.maturity, amount: this.state.amount, fut_hedge_flag: this.state.futHedgeFlag}, method: 'GET'})
.then(resp => {
commit('setFullData_mutations', resp.data.data)
resolve(resp)
})
.catch(resp => {
reject(resp)
})
})
}
},
getters: {
maturityList: state => state.maturityList,
fullDataList: state => state.fullDataList
}
})
export default store;
v-scatter-statistics
<script>
import { defineComponent } from "vue";
import { Scatter } from "vue3-chart-v2";
import store from ".../vuex/store.js";
key = fullDataList[5]["chart"]["y_struct"]
value = fullDataList[5]["chart"]["x"],
result = {},
key.forEach((key,i) => result[key] = value[i]);
export default defineComponent({
name: "v-scatter-statistics",
extends: Scatter,
props: {
chartData: {
type: Object,
default() {
return {}
}
},
options: {
scales: {
y: { result
}
}
}
},
mounted() {
this.renderChart(this.chartData);
},
})
</script>
v-charts-statistics тут настраиваем сам график и передаем значения.
<template>
<div class="v-charts-statistics">
<vScatterStatistics :chartData="test" />
</div>
</template>
<script>
import vScatterStatistics from "./charts/v-scatter-statistics";
export default {
name: "v-charts-statistics",
data() {
return {
test: {
datasets: [
{
label: "GitHub Commits",
showLine: true,
color: "red",
borderColor: "red",
backgroundColor: "rgba(0, 0, 0, 0)",
data: [
{
x: null,
y: this.$options.y,
},
],
},
],
},
};
},
components: {
vScatterStatistics,
},
};
</script>