«Как нанести данные на диаграммы рассеяния с помощью апершартов»

Question

Я использую библиотеку apexchart в Vue.js для отображения данных на диаграммах рассеяния. Я получаю данные из бэкэнда с помощью Python и Flask. Я могу получить данные от внутреннего интерфейса до внешнего, но на диаграмме рассеяния ничего не отображается, а также нет ошибок на консоли. Моим ожидаемым результатом должна быть диаграмма рассеяния, содержащая все значения координат, которые я получаю из Backend, то есть мой файл .py.

<template>
<div>
   <div id="chart">
      <apexchart type=scatter height=350 :options="chartOptions" :series="series" />
    </div>
    <div>
        <p> {{ df }} </p>
    </div>
</div>
</template>

<script>
import axios from 'axios';
import VueApexCharts from 'vue-apexcharts';
import Vue from 'vue';

Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)


export default {
    data: function() {
      return {
        df: [],
        chartOptions: {
          chart: {
            zoom: {
              enabled: true,
              type: 'xy'
            }
          },


          xaxis: {
            tickAmount: 3,
          },
          yaxis: {
            tickAmount: 3,
          }
        },
        series: [{
          name: 'series-1',
          data: [[]]
      }],
      }
      },
    methods: {
        getPoints() {
            const path='http://localhost:5000/scatter';
            axios.get(path)
            .then((res) => {
                this.df=res.data;
                console.log(this.df)
            })
            .catch((error) => {
                console.error(error);
            });
        },

    },
    created(){
        this.getPoints();
    },
};

</script>


#Backeend (.py file)

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
app.config.from_object(__name__)

@app.route('/scatter',methods=['GET'])
def get_points():
    return jsonify([[2, 3], [1, 5]])

Результаты, которые я получаю в браузере

Answer 1

Пропеллер, в котором вы назначаете свои данные, не используется в качестве series.data диаграммы.

Изначально вы помещаете пустой массив в series.data, но после получения данных кажется, что вы не обновляете этот массив. Следовательно, вы можете видеть пустой график.

Попробуйте обновить метод getPoints до этого

    getPoints() {
        const path='http://localhost:5000/scatter';
        axios.get(path)
        .then((res) => {
            this.series = [{
              data: res.data
            }]
        })
        .catch((error) => {
            console.error(error);
        });
    }