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

我想使用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 Dataframe 列转换为行。可以通过<fastapi-server-ipaddress>/data HTTP端点请求股票数据。
如何将实际库存和预测库存并排显示？类似下图：

将vue-chartjs与chart.js软件包一起使用。使用以下命令安装它们：

npm install vue-chartjs chart.js

之后，将其导入Vue组件。但是，请记住，在条形图上显示API数据时存在问题。也就是说，Chart.js会尝试同步呈现图表和访问图表数据，因此图表会在API数据到达之前挂载。
通过使用v-if条件渲染来防止这种情况。有关更多信息，请查看文档。现在，创建带有loaded、data和option属性的条形图组件。

<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的返回值必须与StockDevelopment类中描述的相应FastAPI响应数据相匹配。

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

1条答案

相关问题

热门标签

最新问答