Javascript 如何使用api获取SQL数据并在本机svg图表中使用该数据？我有一个API，我想用来获取数据和显示

我正在使用api获取一些数据。在该api中，有执行的SQL查询。我有一个api，将用于获取数据或执行这些查询。我想知道如何用从api获取的动态数据替换图表的静态数据

这是我的

选项卡DashboardDetail.js

，我将根据api数据获取所有图表的标题：

import React from 'react';
import DefaultScrollView from '../components/default/DefaultScrollView';
import ChartView from '../components/default/ChartView';
import CogniAreaChart from '../components/CogniAreaChart';
import { areaChartData } from '../chartData';

const TabDashboardDetail = ({ navigation, route }) => {
  const tabsConfig = route.params.tabsConfig;
  return (
    <DefaultScrollView>
      {tabsConfig.components.map((comp, index) => {
        return (
          <ChartView key={index} title={comp.name}>
            <CogniAreaChart areaChartData={areaChartData} height={200} />
          </ChartView>
        );
      })}
    </DefaultScrollView>
  );
};

export default TabDashboardDetail;

下面是当前在

CogniAreaChart.js

中使用的areachartData：

export const areaChartData = {
  message: [
    {
      year: '2018',
      quantity: 241.01956823922,
      sales: 74834.12976954,
    },
    {
      year: '2019',
      quantity: 288.57247706422,
      sales: 80022.3050176429,
    },
  ],
  status: 'success',
};

---

我有一个API，如果有人建议的话，我将用这个示例来替换它。

为数据分配一个状态变量，并在组件挂载时进行API调用，并将其保存到状态变量

---

它帮助了我，谢谢！

export const areaChartData = {
  message: [
    {
      year: '2018',
      quantity: 241.01956823922,
      sales: 74834.12976954,
    },
    {
      year: '2019',
      quantity: 288.57247706422,
      sales: 80022.3050176429,
    },
  ],
  status: 'success',
};