Как передать значения в график ( библиотека 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>

Ответы (0 шт):