معرفی
این مقاله نحوه ایجاد و استفاده از نمودار میله ای را با استفاده از vega در reactjs نشان می دهد. این مقاله با مقدمه ای بر بسته react-vega شروع می شود. پس از آن، نشان می دهد که چگونه فایل JSON vega برای ایجاد هر نموداری با استفاده از داده های فرمت شده JSON آن کار می کند.
وگا چیست؟
Vega یک گرامر تجسمی است، یک زبان اعلامی برای ایجاد، ذخیره و به اشتراک گذاری طرح های تجسم تعاملی. با Vega، می توانید ظاهر بصری و رفتار تعاملی یک تجسم را در قالب JSON توصیف کنید و نماهای مبتنی بر وب را با استفاده از Canvas یا SVG ایجاد کنید.
مرجع از: در اینجا درباره Vega بیشتر بدانید
نمودار میله ای با استفاده از Vega در ReactJS
برای دستیابی به این ویژگی، ما از یک بسته npm استفاده می کنیم.
پیش نیازها
- دانش اولیه ReactJS
- کد ویژوال استودیو
- Node و NPM نصب شده است
مرحله 1. نصب وابستگی های NPM یک پروژه React.js ایجاد کنید
بیایید با استفاده از دستور زیر یک پروژه React جدید ایجاد کنیم.
مرحله 2. وابستگی های NPM را نصب کنید