关键词：
【中文标题】如何使用 api 获取 SQL 数据并在 react-native-svg 图表中使用该数据？我有一个我想用来获取数据和显示的 API【英文标题】：How to fetch SQL data using api and use that data in react-native-svg charts? I am having an API that I want to use to fetch data and display 【发布时间】：2021-04-21 16:36:34 【问题描述】：我正在使用 api 获取一些数据。在该 api 中有执行的 SQL 查询。我有 api 将用于获取数据或执行这些查询。我想知道如何将图表的静态数据替换为将从 api 获取的动态数据。
这是我的TabDashboardDetail.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，它是当前正在渲染的图表文件：
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import View from 'react-native';
import AreaChart, YAxis, XAxis from 'react-native-svg-charts';
import * as shape from 'd3-shape';
const CogniAreaChart = ( areaChartData, visibility, ...props ) =>
const xAxis = areaChartData.message.map((item) => item[Object.keys(item)[0]]);
const areaChartY1 = areaChartData.message.map(
(item) => item[Object.keys(item)[1]],
);
return (
<View
style=
height: props.height,
flexDirection: 'row',
>
<YAxis
data=areaChartY1
contentInset= marginBottom: 20
svg=
fill: 'grey',
fontSize: 12,
/>
<View style= flex: 1 >
<AreaChart
style= flex: 1
data=areaChartY1
contentInset= top: 20, bottom: 20
curve=shape.curveNatural
svg= fill: 'rgba(134, 65, 244, 0.8)'
/>
<XAxis
style= height: 20
data=areaChartY1
formatLabel=(value, index) => xAxis[index]
contentInset= left: 30, right: 30
svg=
fill: 'grey',
fontSize: 12,
rotation: 35,
originY: 5,
y: 15,
/>
</View>
</View>
);
;
export default CogniAreaChart;
这是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。
【问题讨论】：
【参考方案1】：为数据分配一个状态变量，并在组件挂载时调用 API 并将其保存到状态变量
snack example with dummy data
【讨论】：
它帮助了我，谢谢！ @ManishRana 很高兴它帮助了你SQL 如何获取 XML 数据列的值并在 where 子句中使用它
】SQL如何获取XML数据列的值并在where子句中使用它【英文标题】：SQLHowtogetvalueofXMLdatacolumnanduseitinsideofthewhereclause【发布时间】：2019-09-1818:43:45【问题描述】：我有一个表，其中包含一个名为Settings的XML数据类型列。XML数据的结构... 查看详情
Flutter：如何从 api 获取数据并在 PaginatedDataTable 中绑定
】Flutter：如何从api获取数据并在PaginatedDataTable中绑定【英文标题】：Flutter:HowtogetdatafromapiandbindinPaginatedDataTable【发布时间】：2021-10-1900:52:06【问题描述】：import\'dart:convert\';import\'package:flutter/material.dart\';import\'package:http/h 查看详情
我如何使用 fetch API 并在状态下存储响应？
】我如何使用fetchAPI并在状态下存储响应？【英文标题】：HowIdousefetchAPIandstoreresponseinthestate?【发布时间】：2022-01-2112:04:18【问题描述】：我必须从服务器获取一个文件，在渲染组件后，其中包含来自城市的信息，我必须将它分... 查看详情
如何使用 Azure Management Fluent API 获取 Azure SQL 托管实例中的数据库大小？
】如何使用AzureManagementFluentAPI获取AzureSQL托管实例中的数据库大小？【英文标题】：HowtogetsizeofDatabaseinAzureSQLManagedInstanceusingAzureManagementFluentAPI?【发布时间】：2021-06-2302:34:30【问题描述】：有没有什么方法可以使用用于Azure管理的... 查看详情
如何在 Vuex 的操作中使用 axios 获取 Rest API 数据？
】如何在Vuex的操作中使用axios获取RestAPI数据？【英文标题】：HowtogetRestAPIdatausingaxiosinactionsofVuex?【发布时间】：2021-01-1209:24:30【问题描述】：我试图获取RestAPI数据以在Vuex系统的操作中使用axios并在组件中显示该信息。所以我尝... 查看详情
如何使用提供程序在 Flutter ui 中使用 api 响应获取 ListView 构建器数据
】如何使用提供程序在Flutterui中使用api响应获取ListView构建器数据【英文标题】：HowtogetListViewbuilderdatausingapiresponseinflutteruiusingprovider【发布时间】：2020-12-2822:29:27【问题描述】：我试图从提供者那里获取响应并在ui页面中获取，... 查看详情
如何反序列化 IPGeoLocation API 返回的 json 并在 .chtml 视图中使用
】如何反序列化IPGeoLocationAPI返回的json并在.chtml视图中使用【英文标题】：HowtodeserializejsonreturnedbyIPGeoLocationAPIandUseitin.chtmlView【发布时间】：2020-01-0405:35:26【问题描述】：我正在尝试编写一个代码来获取特定IP的数据，我使用了... 查看详情
如何从 MySQL 数据库中获取数据并在 javascript 自动完成中使用？
】如何从MySQL数据库中获取数据并在javascript自动完成中使用？【英文标题】：HowtofetchdatafromMySQLdatabaseanduseinajavascriptautocomplete?【发布时间】：2018-10-2314:08:31【问题描述】：我正在使用jQueryautocomplete构建自动完成功能。为此，我在... 查看详情
laravel 在多行中插入数据，并在一个循环中从 API 获取 [关闭]
...9-12-1621:18:12【问题描述】：我从API获取的数据如下所示：如何在我的控制器laravel中将数据插入到我的数据库中。谁能帮帮我？【问题讨论】：将您的响应代码放在这里，而不仅仅是图像。只需循环遍历主数组 查看详情
Web Crypto API：如何使用导入的 RSA 公钥加密数据并在 Ruby 中解密数据
】WebCryptoAPI：如何使用导入的RSA公钥加密数据并在Ruby中解密数据【英文标题】：WebCryptoAPI:howtoencryptdatawithimportedRSApublickeyanddecryptdataitinRuby【发布时间】：2021-01-1522:26:48【问题描述】：我需要在浏览器端加密数据并在Rails应用程序... 查看详情
从 API 调用获取数据并在 UItableView 行单击上显示另一个 viewController
...9:08:47【问题描述】：我是Swift新手，所以我寻求帮助。我使用API调用在tableview上显示字符列表。当用户单击一行时，我想调用API，获取数据并将 查看详情
如何在 SQL Standard 上导出 SSIS 数据并在 SQL Express 上使用 Bulk Insert 导入？
】如何在SQLStandard上导出SSIS数据并在SQLExpress上使用BulkInsert导入？【英文标题】：HowtoExportSSISdataonSQLStandardandImportwithBulkInsertonSQLExpress?【发布时间】：2009-04-0916:23:37【问题描述】：我想使用SSIS创建数据库表平面文件导出，然后将... 查看详情
React Context : 从 API 获取数据并在 React 组件中发生某些事件时调用 API
...。我需要在反应上下文中调用API以在整个反应应用程序中使用其数据。同样的API也需要 查看详情
如何使用 PHP 和 Smarty 同时获取数据并在浏览器中显示？
】如何使用PHP和Smarty同时获取数据并在浏览器中显示？【英文标题】：HowtofetchthedataanddisplayitinabrowsersimultaneouslyusingPHPandSmarty?【发布时间】：2013-12-2417:44:01【问题描述】：我的网站使用PHP、MySQL、Smarty、jQuery、AJAX等。目前，我正... 查看详情
如何使用 JSON 数据填充 <select> 并在单击时显示值？
】如何使用JSON数据填充<select>并在单击时显示值？【英文标题】：HowcanIpopulate<select>withJSONdataanddisplayvalueswhenclicked?【发布时间】：2020-07-2409:40:36【问题描述】：我一直在尝试这样做，但我只能将数据填充到HTML的select中... 查看详情
如何解析 Twitter api 返回的 json 数据并在我的网页上使用？
】如何解析Twitterapi返回的json数据并在我的网页上使用？【英文标题】：HowcanIparsethejsondatareturnedbyTwitterapianduseitonmywebpage?【发布时间】：2015-10-0101:26:11【问题描述】：首先我使用提到的代码here。我按照别人的建议做了所有事情，... 查看详情
无法从数据库中获取数据并在 VUE 脚本中使用
】无法从数据库中获取数据并在VUE脚本中使用【英文标题】：cannottakedatafromDBanduseitinVUEscript【发布时间】：2020-10-1108:02:31【问题描述】：我尝试从数据库中获取数据并在VUE脚本中使用它，但在控制台中我看到了消息GEThttp://lara7.te... 查看详情
如何从数据库中获取图像并在 laravel 中使用 ajax 以编辑形式预览它？
】如何从数据库中获取图像并在laravel中使用ajax以编辑形式预览它？【英文标题】：HowtogetimagefromDB&previewitineditformusingajaxinlaravel?【发布时间】：2021-05-1019:02:16【问题描述】：我正在尝试在laravel中使用ajax从数据库中获取数据。... 查看详情