{const letters = 0123456789ABCDEF ;let color = # ;for (let i = 0; i < 6; i+..."/>

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊(cè)×

獲取短信驗(yàn)證碼

其他方式登錄

點(diǎn)擊登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

用戶登錄×

賬戶密碼登錄

請(qǐng)使用微信掃描上方二維碼

使用幫助

請(qǐng)求超時(shí)！

請(qǐng)點(diǎn)擊重新獲取二維碼

如何用 160 行代碼，實(shí)現(xiàn)動(dòng)態(tài)炫酷的可視化圖表？

發(fā)布時(shí)間：2020-07-12 03:57:47 來源：網(wǎng)絡(luò) 閱讀：7618 作者：專注地一哥欄目：云計(jì)算

準(zhǔn)備通用工具函數(shù)

getRandomColor：隨機(jī)顏色

const getRandomColor = () => {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]
}
return color;
};

translateY：填充Y軸偏移量

const translateY = (value) => {
return translateY(${value}px);
}

使用useState Hook聲明狀態(tài)變量

我們開始編寫組件DynamicBarChart

const DynamicBarChart = (props) => {
const [dataQueue, setDataQueue] = useState([]);
const [activeItemIdx, setActiveItemIdx] = useState(0);
const [highestValue, setHighestValue] = useState(0);
const [currentValues, setCurrentValues] = useState({});
const [firstRun, setFirstRun] = useState(false);
// 其它代碼...
}

useState的簡(jiǎn)單理解：
const [屬性, 操作屬性的方法] = useState(默認(rèn)值);
變量解析
dataQueue：當(dāng)前操作的原始數(shù)據(jù)數(shù)組
activeItemIdx: 第幾“幀”
highestValue: “榜首”的數(shù)據(jù)值
currentValues: 經(jīng)過處理后用于渲染的數(shù)據(jù)數(shù)組
firstRun: 第一次動(dòng)態(tài)渲染時(shí)間
內(nèi)部操作方法和對(duì)應(yīng)useEffect
請(qǐng)配合注釋使用：

// 動(dòng)態(tài)跑起來～
function start () {
if (activeItemIdx > 1) {
return;
}
nextStep(true);
}
// 對(duì)下一幀數(shù)據(jù)進(jìn)行處理
function setNextValues () {
// 沒有幀數(shù)時(shí)（即已結(jié)束），停止渲染
if (!dataQueue[activeItemIdx]) {
iterationTimeoutHolder = null;
return;
}
// 每一幀的數(shù)據(jù)數(shù)組
const roundData = dataQueue[activeItemIdx].values;
const nextValues = {};
let highestValue = 0;
// 處理數(shù)據(jù)，用作最后渲染（各種樣式，顏色）
roundData.map((c) => {
nextValues[c.id] = {
...c,
color: c.color || (currentValues[c.id] || {}).color || getRandomColor()
};

if (Math.abs(c.value) > highestValue) {
  highestValue = Math.abs(c.value);
}

return c;

});

// 屬性的操作，觸發(fā)useEffect
setCurrentValues(nextValues);
setHighestValue(highestValue);
setActiveItemIdx(activeItemIdx + 1);
}
// 觸發(fā)下一步，循環(huán)
function nextStep (firstRun = false) {
setFirstRun(firstRun);
setNextValues();
}
對(duì)應(yīng)useEffect：
// 取原始數(shù)據(jù)
useEffect(() => {
setDataQueue(props.data);
}, []);
// 觸發(fā)動(dòng)態(tài)
useEffect(() => {
start();
}, [dataQueue]);
// 設(shè)觸發(fā)動(dòng)態(tài)間隔
useEffect(() => {
iterationTimeoutHolder = window.setTimeout(nextStep, 1000);
return () => {
if (iterationTimeoutHolder) {
window.clearTimeout(iterationTimeoutHolder);
}
};
}, [activeItemIdx]);
useEffect示例：
useEffect(() => {
document.title = You clicked ${count} times;
}, [count]); // 僅在 count 更改時(shí)更新
為什么要在 effect 中返回一個(gè)函數(shù)？
這是 effect 可選的清除機(jī)制。每個(gè) effect 都可以返回一個(gè)清除函數(shù)。如此可以將添加和移除訂閱的邏輯放在一起。
整理用于渲染頁(yè)面的數(shù)據(jù)
const keys = Object.keys(currentValues);
const { barGapSize, barHeight, showTitle } = props;
const maxValue = highestValue / 0.85;
const sortedCurrentValues = keys.sort((a, b) => currentValues[b].value - currentValues[a].value);
const currentItem = dataQueue[activeItemIdx - 1] || {};
keys: 每組數(shù)據(jù)的索引
maxValue: 圖表最大寬度

sortedCurrentValues: 對(duì)每組數(shù)據(jù)進(jìn)行排序，該項(xiàng)影響動(dòng)態(tài)渲染。

currentItem: 每組的原始數(shù)據(jù)

開始渲染頁(yè)面
大致的邏輯就是：

根據(jù)不同Props,循環(huán)排列后的數(shù)據(jù)：sortedCurrentValues

計(jì)算寬度，返回每項(xiàng)的label、bar、value

根據(jù)計(jì)算好的高度，觸發(fā)transform。

<div className="live-chart">
{
<React.Fragment>
{
showTitle &&
<h2>{currentItem.name}</h2>
}
<section className="chart">
<div className="chart-bars" style={{ height: (barHeight + barGapSize) keys.length }}>
{
sortedCurrentValues.map((key, idx) => {
const currentValueData = currentValues[key];
const value = currentValueData.value
let width = Math.abs((value / maxValue 100));
let widthStr;
if (isNaN(width) || !width) {
widthStr = '1px';
} else {
widthStr = ${width}%;
}

      return (
        <div className={`bar-wrapper`} style={{ transform: translateY((barHeight + barGapSize) * idx), transitionDuration: 200 / 1000 }} key={`bar_${key}`}>
          <label>
            {
              !currentValueData.label
                ? key
                : currentValueData.label
            }
          </label>
          <div className="bar" style={{ height: barHeight, width: widthStr, background: typeof currentValueData.color === 'string' ? currentValueData.color : `linear-gradient(to right, ${currentValueData.color.join(',')})` }} />
          <span className="value" style={{ color: typeof currentValueData.color === 'string' ? currentValueData.color : currentValueData.color[0] }}>{currentValueData.value}</span>
        </div>
      );
    })
  }
</div>

</section>
</React.Fragment>
}
</div>

定義常規(guī)propTypes和defaultProps

DynamicBarChart.propTypes = {
showTitle: PropTypes.bool,
iterationTimeout: PropTypes.number,
data: PropTypes.array,
startRunningTimeout: PropTypes.number,
barHeight: PropTypes.number,
barGapSize: PropTypes.number,
baseline: PropTypes.number,
};

DynamicBarChart.defaultProps = {
showTitle: true,
iterationTimeout: 200,
data: [],
startRunningTimeout: 0,
barHeight: 50,
barGapSize: 20,
baseline: null,
};

export {
DynamicBarChart
};

如何使用

import React, { Component } from "react";

import { DynamicBarChart } from "./DynamicBarChart";

import helpers from "./helpers";
import mocks from "./mocks";

import "react-dynamic-charts/dist/index.css";

export default class App extends Component {
render() {
return (
<DynamicBarChart
barGapSize={10}
data={helpers.generateData(100, mocks.defaultChart, {
prefix: "Iteration"
})}
iterationTimeout={100}
showTitle={true}
startRunningTimeout={2500}
/>
)
}
}

批量生成Mock數(shù)據(jù)

helpers.js:
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};

function generateData(iterations = 100, defaultValues = [], namePrefix = {}, maxJump = 100) {
const arr = [];
for (let i = 0; i <= iterations; i++) {
const values = defaultValues.map((v, idx) => {
if (i === 0 && typeof v.value === 'number') {
return v;
}
return {
...v,
value: i === 0 ? this.getRandomNumber(1, 1000) : arr[i - 1].values[idx].value + this.getRandomNumber(0, maxJump)
}
});
arr.push({
name: ${namePrefix.prefix || ''} ${(namePrefix.initialValue || 0) + i},
values
});
}
return arr;
};

export default {
getRandomNumber,
generateData
}

mocks.js:

import helpers from './helpers';
const defaultChart = [
{
id: 1,
label: 'Google',
value: helpers.getRandomNumber(0, 50)
},
{
id: 2,
label: 'Facebook',
value: helpers.getRandomNumber(0, 50)
},
{
id: 3,
label: 'Outbrain',
value: helpers.getRandomNumber(0, 50)
},
{
id: 4,
label: 'Apple',
value: helpers.getRandomNumber(0, 50)
},
{
id: 5,
label: 'Amazon',
value: helpers.getRandomNumber(0, 50)
},
];
export default {
defaultChart,
}
一個(gè)乞丐版的動(dòng)態(tài)排行榜可視化就做好喇。
完整代碼
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import './styles.scss';

const getRandomColor = () => {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]
}
return color;
};

const translateY = (value) => {
return translateY(${value}px);
}

const DynamicBarChart = (props) => {
const [dataQueue, setDataQueue] = useState([]);
const [activeItemIdx, setActiveItemIdx] = useState(0);
const [highestValue, setHighestValue] = useState(0);
const [currentValues, setCurrentValues] = useState({});
const [firstRun, setFirstRun] = useState(false);
let iterationTimeoutHolder = null;

function start () {
if (activeItemIdx > 1) {
return;
}
nextStep(true);
}

function setNextValues () {
if (!dataQueue[activeItemIdx]) {
iterationTimeoutHolder = null;
return;
}

const roundData = dataQueue[activeItemIdx].values;
const nextValues = {};
let highestValue = 0;
roundData.map((c) => {
  nextValues[c.id] = {
    ...c,
    color: c.color || (currentValues[c.id] || {}).color || getRandomColor()
  };

  if (Math.abs(c.value) > highestValue) {
    highestValue = Math.abs(c.value);
  }

  return c;
});
console.table(highestValue);
    www.kaifx.cn

setCurrentValues(nextValues);
setHighestValue(highestValue);
setActiveItemIdx(activeItemIdx + 1);

}

function nextStep (firstRun = false) {
setFirstRun(firstRun);
setNextValues();
}

useEffect(() => {
setDataQueue(props.data);
}, []);

useEffect(() => {
start();
}, [dataQueue]);

useEffect(() => {
iterationTimeoutHolder = window.setTimeout(nextStep, 1000);
return () => {
if (iterationTimeoutHolder) {
window.clearTimeout(iterationTimeoutHolder);
}
};
}, [activeItemIdx]);

const keys = Object.keys(currentValues);
const { barGapSize, barHeight, showTitle, data } = props;
console.table('data', data);
const maxValue = highestValue / 0.85;
const sortedCurrentValues = keys.sort((a, b) => currentValues[b].value - currentValues[a].value);
const currentItem = dataQueue[activeItemIdx - 1] || {};

return (
<div className="live-chart">
{
<React.Fragment>
{
showTitle &&
<h2>{currentItem.name}</h2>
}
<section className="chart">
<div className="chart-bars" style={{ height: (barHeight + barGapSize) keys.length }}>
{
sortedCurrentValues.map((key, idx) => {
const currentValueData = currentValues[key];
const value = currentValueData.value
let width = Math.abs((value / maxValue 100));
let widthStr;
if (isNaN(width) || !width) {
widthStr = '1px';
} else {
widthStr = ${width}%;
}

              return (
                <div className={`bar-wrapper`} style={{ transform: translateY((barHeight + barGapSize) * idx), transitionDuration: 200 / 1000 }} key={`bar_${key}`}>
                  <label>
                    {
                      !currentValueData.label
                        ? key
                        : currentValueData.label
                    }
                  </label>
                  <div className="bar" style={{ height: barHeight, width: widthStr, background: typeof currentValueData.color === 'string' ? currentValueData.color : `linear-gradient(to right, ${currentValueData.color.join(',')})` }} />
                  <span className="value" style={{ color: typeof currentValueData.color === 'string' ? currentValueData.color : currentValueData.color[0] }}>{currentValueData.value}</span>
                </div>
              );
            })
          }
        </div>
      </section>
    </React.Fragment>
  }
</div>

);
};

DynamicBarChart.propTypes = {
showTitle: PropTypes.bool,
iterationTimeout: PropTypes.number,
data: PropTypes.array,
startRunningTimeout: PropTypes.number,
barHeight: PropTypes.number,
barGapSize: PropTypes.number,
baseline: PropTypes.number,
};

DynamicBarChart.defaultProps = {
showTitle: true,
iterationTimeout: 200,
data: [],
startRunningTimeout: 0,
barHeight: 50,
barGapSize: 20,
baseline: null,
};

export {
DynamicBarChart
};

styles.scss

.live-chart {
width: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
h2 {
font-weight: 700;
font-size: 60px;
text-transform: uppercase;
text-align: center;
padding: 20px 10px;
margin: 0;
}

.chart {
position: relative;
margin: 20px auto;
}

.chart-bars {
position: relative;
width: 100%;
}

.bar-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
position: absolute;
top: 0;
left: 0;
transform: translateY(0);
transition: transform 0.5s linear;
padding-left: 200px;
box-sizing: border-box;
width: 100%;
justify-content: flex-start;

label {
  position: absolute;
  height: 100%;
  width: 200px;
  left: 0;
  padding: 0 10px;
  box-sizing: border-box;
  text-align: right;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.value {
  font-size: 16px;
  font-weight: 700;
  margin-left: 10px;
}

.bar {
  width: 0%;
  transition: width 0.5s linear;
}

}
}
結(jié)語
一直對(duì)實(shí)現(xiàn)動(dòng)態(tài)排行榜可視化感興趣，無奈多數(shù)都是基于D3或echarts實(shí)現(xiàn)。
而這個(gè)庫(kù)，不僅脫離圖形庫(kù)，還使用了React 16的新特性。也讓我徹底理解了React Hook的妙用。

向AI問一下細(xì)節(jié)

推薦閱讀：

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

上一篇新聞：
LNMP--->NGINX關(guān)于自動(dòng)匹配程式筆記
下一篇新聞：
DCOM（分布式組件對(duì)象模型）原理淺析（二）

猜你喜歡

AI
助
手

產(chǎn)品服務(wù)

地區(qū)劃分

專題活動(dòng)

幫助支持

關(guān)于我們

售后咨詢

7*24小時(shí)在線電話：400-100-2938

7*24小時(shí)在線 QQ：800811969

關(guān)注億速云

億速云公眾號(hào)

手機(jī)網(wǎng)站二維碼