如何显示来自 Vue.js 中 FastAPI 端点的多个数据集的垂直条形图？

Question

我想使用 Vue.js 框架显示多个数据集。数据集来自 FastAPI 服务器后端，包含模拟股票数据。

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import polars as pl
from pydantic import BaseModel
from typing import List

app = FastAPI()

# Allow requests from the Vue.js frontend
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173"],
    allow_methods=["*"],
    allow_headers=["*"],
)

class StockDevelopment(BaseModel):
    date: str
    actual_stock: float
    predicted_stock: float

mock_data = pl.DataFrame({
    "date": ["2023-09-01", "2023-09-02", "2023-09-03", "2023-09-04", "2023-09-05"],
    "actual_stock": [100, 150, 120, 90, 115],
    "predicted_stock": [110, 140, 130, 100, 113],
})

@app.get("/data")
async def get_data() -> List[StockDevelopment]:
    stock_rows = mock_data.to_dicts()
    stocks = [StockDevelopment(**row) for row in stock_rows]
    return stocks

date

、

actual_stock

和

predicted_stock

数据框列转换为行。可以通过

<fastapi-server-ipaddress>/data

HTTP 端点请求股票数据。

如何将实际库存和预测库存并排显示？类似下图：

Answer 1

将

vue-chartjs

与

chart.js

包一起使用。使用以下命令安装它们：

npm install vue-chartjs chart.js

之后导入到Vue组件中。但是，请记住，在条形图上显示 API 数据时存在问题。也就是说，Chart.js 尝试渲染您的图表并同步访问图表数据，因此您的图表会在 API 数据到达之前挂载。

通过使用

v-if

条件渲染来防止这种情况。有关更多信息，请查看文档。现在，使用已加载、数据和选项属性创建条形图组件。

<template>
  <div>
    <h1>Stock Data</h1>
    <!-- The v-if is used to conditionally render the block -->
    <Bar id="my-chart-id" v-if="loaded" :options="chartOptions" :data="chartData" :width="600" />
  </div>
</template>

<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: { Bar },
  data: () => ({
    // Prevents chart to mount before the data arrives from API endpoint
    loaded: false,
    chartData: {
      labels: [],
      datasets: [
        {
          label: 'Actual',
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          data: []
        },
        {
          label: 'Predicted',
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          data: []
        }
      ]
    },
    chartOptions: {
      responsive: true
    }
  }),
  async mounted() {
    const apiUrl = 'http://localhost:8000/data'

    // Make an HTTP request to fetch the data from the FastAPI server
    await fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => {
        // Extract data from the API response and update the chartData
        this.chartData.labels = data.map((stock) => stock.date)
        this.chartData.datasets[0].data = data.map((stock) => stock.actual_stock)
        this.chartData.datasets[1].data = data.map((stock) => stock.predicted_stock)

        // Allow the chart to display the data from the API endpoint
        this.loaded = true
      })
      .catch((error) => {
        console.error('Error fetching data:', error)
      })
  }
}
</script>

只有数据到达并且没有任何错误时才会加载条形图。这是通过从 API 端点获取数据后将

loaded

属性设置为

true

来实现的。数据集的值在 HTTP 请求期间设置，并使用

map

函数填充每个数据。如果您想添加更多数据集，请使用另一个条目扩展

chartData.datasets

数组。然后，您可以将数据分配给

this.chartData.datasets[2].data

数组。

注意：

stock.date

、

stock.actual_stock

和

stock.predicted_stock

返回值必须与其相应的 FastAPI 响应数据相匹配，如

StockDevelopment

类中所述。