json - 如何计算 React 中的相似数据?
问题描述
我有 BarChart,但我不知道如何计算 barChart 中的类似数据。我不知道该怎么做。我尝试了几种方法,但没有得到有效的解决方案。
我使用 axios 和 BarChart 的主要组件
let tableCash = "CLDR display name";
let conutrCode = "Country Code";
let countryName = "Country Name";
let currencyName = "ISO4217-currency_name";
let currencyMinor = "ISO4217-currency_minor_unit";
let year = "Year";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
year: [],
minor: []
}
}
counter = (e) => {
var count = {};
this.state.minor.forEach(function(i) { count[i] = (count[i]||0) + 1;});
console.log(count);
}
componentDidMount() {
axios.get('https://pkgstore.datahub.io/core/population/population_json/data/43d34c2353cbd16a0aa8cadfb193af05/population_json.json')
.then(res => {
console.log(res.data.slice(11449, 11505));
this.setState({
year: res.data,
})
})
axios.get('https://pkgstore.datahub.io/core/country-codes/country-codes_json/data/471a2e653140ecdd7243cdcacfd66608/country-codes_json.json')
.then(res => {
// console.log(res.data.map(eee => eee.Capital));
console.log(res.data.map(eee => eee[currencyMinor]));
this.setState({
minor: res.data,
})
})
// this.counter();
}
render() {
const { year, minor } = this.state;
const dataList = year.length ? (year.slice(11449, 11506).filter((album, i) => {
return (
<ul>
{album.Year}
{album.Value}
</ul>
);
}).map(ee => ee)
) : (
<div className="center">No data yet! </div>
)
const dataList2 = minor.length ? (minor.filter((album, i) => {
return (
<ul>
{album.currencyMinor}
{album.currencyName}
</ul>
);
}).map(ee => ee)
) : (
<div className="center">No data yet! </div>
)
return (
<div className="containerLoader" style={containerLoader}>
<div className="card z-depth-0 project-summary thumb">
<div className="card-content grey-text text-darken-3 containerPost">
<DataThumb data={dataList} />
{/* {this.counter()} */}
<BarCharts data={dataList2} />
</div>
</div>
</div>
)
}
}
这是我发送数据的空组件。
function DataThumb(props) {
return (
<LineChart width={900} height={250} data={props.data}
margin={{ top: 5, right: 30, left: 50, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis label={{ value: 'Years', position: 'insideBottomRight', offset: -10 }} dataKey="Year" />
<YAxis label={{ value: 'Population', angle: -90, position: 'insideLeft', offset: -20 }} />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="Value" stroke="#8884d8" />
</LineChart>
)
}
function BarCharts(props) {
return (
<BarChart width={730} height={250} data={props.data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="ISO4217-currency_name" />
<YAxis />
<Tooltip />
<Legend />
{/* <Bar dataKey="ISO4217-currency_name" fill="#8884d8" /> */}
<Bar dataKey="ISO4217-currency_minor_unit" fill="#82ca9d" />
</BarChart>
)
}
const containerLoader = {
display: 'flex',
justifyContent: 'center',
}
我不知道如何计算相同的数据。如果有人有想法请帮忙!:-)
编辑1:
解决方案
推荐阅读
- python-3.x - 密码生成器 - 具有最小密码长度约束的实现,例如密码长度 = 8(在 python 中)
- javascript - 组件不渲染,但react不显示错误
- python - 如何使用 Python 在 Azure 应用服务中获取 AAD 客户端配置文件信息
- delphi - TIdHTTP 线程安全吗?
- c# - 如何以 c# 形式翻转图片框
- javascript - 反应页面内null的属性addEventListener
- oracle12c - 需要读取多个节点的值:ORA-19025:EXTRACTVALUE 只返回一个节点的值
- html - 通过 AJAX(jquery modal)将页面内容加载到模式中
- java - 从重写的抽象方法返回 null 是否可以
- react-native - 如何将屏幕标题放在每个屏幕的标题中?