“如何使用顶点图在散点图上绘制数据”答案

【问题标题】："How to plot the data on the Scatterplots using apexcharts"“如何使用顶点图在散点图上绘制数据”
【发布时间】：2019-01-11 17:27:18
【问题描述】：

我正在使用Vue.js 中的 apexchart 库在散点图上绘制数据。我使用 Python 和 Flask 从后端获取数据。我能够从后端获取数据到前端，但是散点图没有显示任何内容，控制台上也没有错误。我的预期结果应该是包含我从后端获得的所有坐标值的散点图，即我的 .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]])

Results which I am getting on the Browser

【问题讨论】：

标签： javascript vue.js flask scatter-plot apexcharts

【解决方案1】：

您在其中分配数据的 df 道具未用作图表的 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);
        });
    }

【讨论】：