Languages
[Edit]
PL

Prosty animowany wykres słupkowy w React

3 points
Created by:
Dirask Community
5610

Mało ludzi wie, że do zbudowania animowanego wykresu słupkowego nie potrzeba wiele?
W tym artykule postaram si─Ö przybli┼╝y─ç Ci jak uzyska─ç taki efekt w Reakcie. 📊

Efekt końcowy:

Niestandardowy animowany wykres słupkowy w Reakcie
Niestandardowy animowany wykres słupkowy w React.

G┼é├│wna idea polega na tworzeniu pojedynczych s┼éupk├│w kt├│re opisali┼Ťmy od 0 do 100%, s┼éupki s─ů zorganizowane kolejno obok siebie w wykres generuj─ůc przyk┼éadowy zestaw danych
w oparciu o funkcję cosinus.

Ka┼╝da zmiana zestawu danych opisuj─ůcych wykres powoduje przerenderowanie z p┼éynnym przej┼Ťciem (dzieje si─Ö to za spraw─ů prostego stylu o nazwie transition).

Efekt uzyskujemy┬áza pomoc─ů kilku linijek kodu, poniewa┼╝ wi─Ökszo┼Ť─ç robi─ů tak w┼éa┼Ťciwie style. 🎨

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// import React from 'react';
// import ReactDOM from 'react-dom';

// ---------------------------------

const containerStyle = {
  	padding: '0 1px',
  	background: '#ffffff',
  	flex: '1'
};

const spaceStyle = {
  	background: '#ffffff',
  	transition: '0.3s'
};

const barStyle = {
  	background: '#00cc00',
  	transition: '0.3s'
};

const Bar = ({value}) => {
  	return (
      <div style={containerStyle}>
        <div style={{...spaceStyle, height: `${100 - value}%`}} />
        <div style={{...barStyle, height: `${value}%`}} />
      </div>
    );
};

const chartStyle = {
  	width: '400px',
  	height: '300px',
	display: 'flex',
  	overflow: 'hidden'
};

const Chart = ({data}) => {
	return (
      <div style={chartStyle}>
        {data.map((value, index) => <Bar key={index} value={value} />)}
      </div>
    );
};

// ---------------------------------

const calculateData = (xOffset) => {
	const data = [ ];
    for (var x = 0; x < 3.1415; x += 0.1) {
        const y = Math.cos(x + xOffset) + 1;
        data.push(50 * y);
    }
  	return data;
};

const App = () => {
    const [data, setData] = React.useState(() => calculateData(0));
  	const xOffsets = [0, 0.7853, 1.5707, 2.3559, 3.1415];
    return (
      <div>
        <Chart data={data} />
        <br />
        <div>
          <span>xOffset: </span>
          {xOffsets.map(xOffset => {
              const handleClick = () => setData(calculateData(xOffset));
              return (
                <button key={xOffset} onClick={handleClick}>{xOffset}</button>
              );
          })}
        </div>
      </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Co my┼Ťlicie o takim wykresie? Czy uwa┼╝acie, ┼╝e by┼éoby mo┼╝liwe zbudowanie prostej biblioteki dla r├│┼╝nych typ├│w wykres├│w?

Dajcie zna─ç w komentarzach! 😊

Powi─ůzane posty

ReactJS - Artykuły

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join