如何用160行代码,实现动态炫酷的可视化图表吗?

const translateY=(值)=比;{
<代码>返回translateY ($ {value} px) ,
}

使用useState钩声明状态变量

我们开始编写组件DynamicBarChart

const DynamicBarChart=(道具)=比;{
const [dataQueue setDataQueue]=useState ([]);
const [activeItemIdx setActiveItemIdx]=useState (0);
const [highestValue setHighestValue]=useState (0);
const [currentValues setCurrentValues]=useState ({});
const [firstRun setFirstRun]=useState(假);
//其它代码…
}

　　<李> useState的简单理解:
常量(属性,操作属性的方法]=useState(默认值),李 　　<李>变量解析
dataQueue:当前操作的原始数据数组
activeItemIdx:第几“帧”
highestValue:“榜首”的数据值
currentValues:经过处理后用于渲染的数据数组
firstRun:第一次动态渲染时间
内部操作方法和对应useEffect
请配合注释使用:李 　　

//动态跑起来~
函数开始(){
如果(activeItemIdx祝辞1){
返回;
}
nextStep(真正);
}
//对下一帧数据进行处理
函数setNextValues () {
//没有帧数时(即已结束),停止渲染
如果(! dataQueue [activeItemIdx]) {
iterationTimeoutHolder=零;
返回;
}
//每一帧的数据数组
const roundData=https://www.yisu.com/zixun/dataQueue [activeItemIdx] . values;
const nextValues={};
让highestValue=https://www.yisu.com/zixun/0;
//处理数据,用作最后渲染(各种样式,颜色)
roundData.map ((c)=比;{
nextValues (c。id]={
…c,
颜色:c。色| | (currentValues [c。id] | | {})。色| | getRandomColor ()
};

 <代码>如果Math.abs (c.value)比;highestValue) {
　　highestValue=https://www.yisu.com/zixun/Math.abs (c.value);
　　}
　　
　　返回c;  

}); 　　

//属性的操作,触发useEffect
setCurrentValues (nextValues);
setHighestValue (highestValue);
setActiveItemIdx (activeItemIdx + 1);
}
//触发下一步,循环
函数nextStep (firstRun=false) {
setFirstRun (firstRun);
setNextValues ();
}
对应useEffect:
//取原始数据
useEffect(()=比;{
setDataQueue (props.data);
}, []);
//触发动态
useEffect(()=比;{
start ();
}, [dataQueue]);
//设触发动态间隔
useEffect(()=比;{
iterationTimeoutHolder=窗口。setTimeout (nextStep, 1000年)。
返回()=比;{
如果(iterationTimeoutHolder) {
window.clearTimeout (iterationTimeoutHolder);
}
};
}, [activeItemIdx]);
useEffect示例:
useEffect(()=比;{
文档。title=<代码>你点击${数}次> },[数]);//仅在数更改时更新
为什么要在影响中返回一个函数?
这是效果可选的清除机制。每个效应都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。
整理用于渲染页面的数据
const键=种(currentValues);
const {barGapSize、barHeight showTitle}=道具;
const maxValue=https://www.yisu.com/zixun/highestValue 0.85;
const sortedCurrentValues=键。排序((a, b)=比;currentValues [b]。价值——currentValues [a]。value);
const currentItem=dataQueue [activeItemIdx - 1] | | {};
键:每组数据的索引
maxValue:图表最大宽度

sortedCurrentValues:对每组数据进行排序,该项影响动态渲染。

currentItem:每组的原始数据

开始渲染页面
大致的逻辑就是:

根据不同道具、循环排列后的数据:sortedCurrentValues

计算宽度,返回每项的标签,酒吧,价值

根据计算好的高度,触发变换。

& lt; div className=發ive-chart"在
{
& lt; React.Fragment>
{
showTitle,,
& lt; h2> {currentItem.name} & lt;/h2>
}
& lt;部分className=癱hart"在
& lt; div className=癱hart-bars"风格={{高度:(barHeight + barGapSize) 键。长度}}在
{
sortedCurrentValues。地图((关键,idx)=比;{
const currentValueData=https://www.yisu.com/zixun/currentValues(例子);
常量值=https://www.yisu.com/zixun/currentValueData.value
让宽度=数学。abs((价值/maxValue 100));
让widthStr;
如果(isNaN(宽度)| | !宽度){
widthStr=1 px的;

如何用160行代码,实现动态炫酷的可视化图表吗?