Javascript 如何基于API响应中的数据在React中构建简单图表
我想使用Nivo库在React中构建一个简单的图表，以表示API响应中数据的百分比值 响应中的数据如下所示： 我需要用一个非常简单的折线图来表示这些数据 到目前为止，我的组件中有以下代码：Javascript 如何基于API响应中的数据在React中构建简单图表,javascript,reactjs,api,d3.js,response,Javascript,Reactjs,Api,D3.js,Response,我想使用Nivo库在React中构建一个简单的图表，以表示API响应中数据的百分比值 响应中的数据如下所示： 我需要用一个非常简单的折线图来表示这些数据 到目前为止，我的组件中有以下代码： import React, {useState, useEffect} from 'react'; import axios from 'axios'; import {useParams} from 'react-router-dom'; import Loader from '../Components
import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {useParams} from 'react-router-dom';
import Loader from '../Components/Loader';
import { Bar } from "@nivo/bar";
function ArtistDetail() {
const {artist_uuid} = useParams()
const url = `https://run.mocky.io/v3/${artist_uuid}`;
const [artist, setArtist] = useState({
loading: false,
data: null,
error: false
})
let content = null;
useEffect(() => {
setArtist({
loading: true,
data: null,
error: false
})
axios.get(url)
.then(response => {
setArtist({
loading: false,
data: response.data,
error: false
})
})
.catch(() => {
setArtist({
loading: false,
data: null,
error: true
})
})
}, [url])
if(artist.error) {
content = <p>There was an error loading an artist.</p>
}
if(artist.loading) {
content = <p><Loader/></p>
}
if(artist.data) {
content =
<main className="main">
<section className="section section-artist-detail trending claimed">
<div className="page">
<div className="col visual">
<figure>
<img src= {artist.data.data.image}/>
<figcaption>
<button className="btn btn-claim-music-id">Claim music_id</button>
</figcaption>
</figure>
</div>
<div className="col-wrapper">
<div className="col info">
<div className="col-content">
<div className="info-wrapper">
<div className="title-wrapper">
<button className="btn btn-solid border btn-booking-request">Booking Request</button>
<h1 className="title">
{artist.data.data.name}
<div className="tooltip-wrapper">
<span className="profile-claimed">Profile claimed</span>
<div className="tooltip">
<h3>Vote for subgenres</h3>
<p>Don’t agree with the subgenres? Add the ones you think are missing or vote for existing to get yours on top!</p>
<div className="stats-sheet">
{artist.data.data.subgenres.map(subgenre => {
const {name, score} = subgenre;
return (
<div className="row" key={name, score}>
<h5>{name}</h5>
<div className="graph-line">
<span className="line" style= {{width: score + '%'}}>{score}%</span>
</div>
</div>
);
})}
</div>
<p>
<button className="btn btn-shadow">Vote now</button>
</p>
</div>
</div>
<span className="trending-icon">Trending</span>
</h1>
</div>
<div className="row">
<button className="btn btn-save long">Follow</button>
<button className="btn btn-share">
Share
<span>Link copied to clipboard</span>
</button>
</div>
<div className="row">
<label>Origin</label>
<a className="btn btn-filter-tag">{artist.data.data.country.name}</a>
</div>
<div className="row">
<label>Genre</label>
<span className="btn btn-filter-tag">{artist.data.data.genre.name}</span>
</div>
<div className="row">
<label>Subgenres</label>
{artist.data.data.subgenres.map(subgenre => {
const {name} = subgenre;
return (
<span key={name} className="btn btn-filter-tag">{name}</span>
);
})}
<div className="tooltip-wrapper">
<button className="btn btn-add">Add subgenre</button>
<div className="tooltip">
<h3>Vote for subgenres</h3>
<p>Don’t agree with the subgenres? Add the ones you think are missing or vote for existing to get yours on top!</p>
<div className="stats-sheet">
{artist.data.data.subgenres.map(subgenre => {
const {name, score} = subgenre;
return (
<div className="row" key={name, score}>
<h5>{name}</h5>
<div className="graph-line">
<span className="line" style= {{width: score + '%'}}>{score}%</span>
</div>
</div>
);
})}
</div>
<p>
<button className="btn btn-shadow">Vote now</button>
</p>
</div>
</div>
</div>
</div>
<div className="footer-detail">
<ul className="social-list">
{artist.data.data.social_links.map(item => {
const {channel, link} = item;
return (
<li key={channel, link}>
<a href= {link} className= {`btn social-icon ${channel}`}>{channel}</a>
</li>
);
})}
</ul>
<div className="tooltip-wrapper">
<button className="btn btn-add">Add links</button>
<div className="tooltip">
<h3>Got more info?</h3>
<p>Add Place's links so everyone can see their social media highlights.</p>
<p>
<button className="btn btn-shadow">Add links</button>
</p>
</div>
</div>
</div>
</div>
</div>
<div className="col stats">
<div className="col-content">
<Bar
width={600}
height={400}
margin={{ top: 60, right: 80, bottom: 60, left: 80 }}
data={artist.data.data.popularity}
indexBy="city"
keys={["percentage"]}
labelTextColor="inherit:darker(1.4)"
enableGridX={false}
layout="horizontal"
maxValue={10}
axisTop={null}
axisRight={null}
axisBottom={null}
axisLeft={null}
enableGridX={false}
enableGridY={false}
isInteractive={false}
/>
<div className="stats-sheet">
<label>Most popular in</label>
{artist.data.data.popularity.map(popular => {
const {city} = popular;
return (
<div className="row" key={city}>
<h5>{city}</h5>
<div className="graph-line">
<span className="line" style={{width: 47 + '%'}}>47%</span>
</div>
</div>
);
})}
</div>
</div>
</div>
</div>
<button className="btn btn-scroll-down">Scroll down</button>
</div>
</section>
</main>
}
return (
<div>
{content}
</div>
)
}
export default ArtistDetail;
import React，{useState，useffect}来自“React”；
从“axios”导入axios；
从'react router dom'导入{useParams}；
从“../Components/Loader”导入加载程序；
从“@nivo/Bar”导入{Bar}；
函数ArtistDetail（）{
常量{artist_uuid}=useParams（）
常量url=`https://run.mocky.io/v3/${artist_uuid}`；
const[artist，setArtist]=useState({
加载：false，
数据：空，
错误：false
})
让content=null；
useffect（（）=>{
赛特({
加载：对，
数据：空，
错误：false
})
获取（url）
。然后（响应=>{
赛特({
加载：false，
数据：response.data，
错误：false
})
})
.catch（（）=>{
赛特({
加载：false，
数据：空，
错误：正确
})
})
}，[url]）
如果（艺术家错误）{
content=加载艺术家时出错
}
如果（艺术家加载）{
内容=
}
if（艺术家数据）{
内容=
索取音乐证
预订请求
{artist.data.data.name}
声称的个人资料
为亚体裁投票
不同意子类型？添加您认为缺少的子类型或投票支持现有的子类型，使您的子类型位于顶部
{artist.data.data.subgenres.map（subgenre=>{
const{name，score}=子体裁；
返回(
{name}
{score}%
);
})}
现在投票
趋向
跟随
分享
链接已复制到剪贴板
起源
);
})}
添加链接
有更多信息吗？
添加Place的链接，这样每个人都可以看到他们的社交媒体亮点
添加链接
最受欢迎的
{artist.data.data.popularity.map（popular=>{
const{city}=受欢迎；
返回(
{城市}
47%
);
})}
向下滚动
}
返回(
{content}
)
}
导出默认ArtistDetail；
<div className="graph-line">
<span className="line" style={{ width: 47 + "%" }}>
47%
</span>
</div>;
47%
;
<ResponsiveBar
data={data.popularity}
keys={[ 'city', 'percentage' ]}
maxValue={100}
...
>
{artist.data.data.popularity.map(popular => {
const {city} = popular;
const { city, percentage } = popular
<span>{percentage}%</span>