رابط های تجسم داده ها را در پایتون با داش ایجاد کنید

اکنون تماشا کنید که این آموزش دارای یک دوره ویدیویی مرتبط است که توسط تیم واقعی پایتون ایجاد شده است. آن را به همراه آموزش کتبی برای تعمیق درک خود تماشا کنید: رابط های تجسم داده در پایتون با داش

در گذشته ، ایجاد برنامه های وب تحلیلی کار برای توسعه دهندگان فصلی بود که نیاز به دانش چندین زبان و چارچوب برنامه نویسی داشت. این دیگر اینگونه نیستامروزه می توانید با استفاده از پایتون خالص ، رابط های تجسم داده را ایجاد کنید. یکی از ابزارهای محبوب برای این کار Dash است.

Dash به دانشمندان داده امکان نمایش نتایج خود را در برنامه های وب تعاملی می دهد. لازم نیست متخصص در توسعه وب باشید. بعد از ظهر ، می توانید یک برنامه داش را برای به اشتراک گذاشتن با دیگران بسازید و مستقر کنید.

در این آموزش ، شما می آموزید که چگونه:

• یک برنامه داش ایجاد کنید
• از اجزای هسته Dash و اجزای HTML استفاده کنید
• سبک برنامه Dash خود را سفارشی کنید
• برای ساخت برنامه های تعاملی از تماس تلفنی استفاده کنید
• درخواست خود را در Heroku مستقر کنید

می توانید با کلیک روی لینک زیر کد منبع ، داده ها و منابع را برای نمونه نمونه مورد نظر خود در این آموزش بارگیری کنید:

کد منبع را دریافت کنید: اینجا را کلیک کنید تا کد منبع مورد استفاده خود را برای کسب اطلاعات در مورد ایجاد رابط های تجسم داده در پایتون با Dash در این آموزش کلیک کنید.

داش چیست؟

Dash یک چارچوب منبع باز برای ایجاد رابط های تجسم داده است. در سال 2017 به عنوان یک کتابخانه پایتون منتشر شد ، این رشد شامل اجرای R و Julia است. DASH به دانشمندان داده کمک می کند تا بدون نیاز به دانش پیشرفته توسعه وب ، برنامه های وب تحلیلی را بسازند.

سه فناوری هسته اصلی را تشکیل می دهد:

1. Flask عملکرد سرور وب را تأمین می کند.
2. react. js رابط کاربری صفحه وب را ارائه می دهد.
3. plotly. js نمودارهای مورد استفاده در برنامه شما را تولید می کند.

اما لازم نیست نگران این باشید که همه این فناوری ها با هم کار کنند. داش این کار را برای شما انجام می دهد. شما فقط باید Python ، R یا Julia را بنویسید و آن را با کمی CSS بپاشید.

Plotly ، یک شرکت مستقر در کانادا ، Dash ساخته و از توسعه آن پشتیبانی می کند. شما ممکن است این شرکت را از کتابخانه های محبوب گرافیکی که نام آن را به اشتراک می گذارند ، بدانید. Plotly (این شرکت) با منبع تغذیه باز و آن را تحت مجوز MIT منتشر کرد ، بنابراین می توانید بدون هیچ هزینه ای از داش استفاده کنید.

Plotly همچنین یک همراه تجاری به Dash به نام Dash Enterprise ارائه می دهد. این سرویس پرداخت شده خدمات پشتیبانی مانند میزبانی ، استقرار و مدیریت تأیید اعتبار در برنامه های DASH را در اختیار شرکت ها قرار می دهد. اما این ویژگی ها در خارج از اکوسیستم منبع باز Dash زندگی می کنند.

داش به شما در ساخت سریع داشبورد کمک می کند. اگر عادت دارید با استفاده از پایتون ، داده ها یا تجسم داده های ساختمانی را تجزیه و تحلیل کنید ، پس Dash یک افزودنی مفید برای جعبه ابزار شما خواهد بود. در اینجا چند نمونه از آنچه می توانید با داش بسازید آورده شده است:

این فقط یک نمونه کوچک است. اگر می خواهید موارد جالب استفاده دیگری را ببینید ، سپس گالری برنامه Dash را بررسی کنید.

توجه: برای پیروی از این آموزش نیازی به دانش پیشرفته در مورد توسعه وب ندارید ، اما برخی از آشنایی با HTML و CSS صدمه ای نخواهد دید.

بقیه این آموزش فرض می کند که اصول موضوعات زیر را می دانید:

• کتابخانه های گرافیکی پایتون مانند Plotly ، Bokeh یا Matplotlib
• HTML و ساختار یک فایل HTML

اگر از الزامات احساس راحتی می کنید و می خواهید یاد بگیرید که چگونه در پروژه بعدی خود از DASH استفاده کنید ، به بخش زیر ادامه دهید!

با داش در پایتون شروع کنید

در این آموزش ، روند پایان به پایان ساخت داشبورد را با استفاده از خط داش طی خواهید کرد. اگر به همراه مثالها را دنبال کنید ، از یک داشبورد برهنه بر روی دستگاه محلی خود به یک داشبورد سبک شده مستقر در Heroku می روید.

برای ساخت داشبورد ، بین سالهای 2015 و 2018 از مجموعه داده های فروش و قیمت آووکادو در ایالات متحده استفاده خواهید کرد. این مجموعه داده توسط جاستین کیگینز با استفاده از داده های هیئت مدیره Hass Avocado تهیه شده است.

چگونه محیط محلی خود را تنظیم کنیم

برای توسعه برنامه خود ، برای ذخیره کد و داده های خود و یک محیط مجازی تمیز Python 3 به یک فهرست جدید نیاز دارید. برای ایجاد آن ، دستورالعمل های زیر را دنبال کنید ، نسخه ای را که با سیستم عامل شما مطابقت دارد ، انتخاب کنید.

اگر از ویندوز استفاده می کنید ، سپس یک فرمان را باز کنید و این دستورات را اجرا کنید:

دستور اول دایرکتوری برای پروژه شما ایجاد می کند و مکان فعلی شما را در آنجا حرکت می دهد. دستور دوم یک محیط مجازی در آن مکان ایجاد می کند. آخرین فرمان محیط مجازی را فعال می کند. حتما مسیر را در دستور دوم با مسیر پرتاب Python 3 خود جایگزین کنید.

اگر از MacOS یا Linux استفاده می کنید ، این مراحل را از یک ترمینال دنبال کنید:

دو دستور اول اقدامات زیر را انجام می دهند:

1. یک دایرکتوری به نام Avocado_Analytics ایجاد کنید
2. مکان فعلی خود را به فهرست Avocado_Analytics منتقل کنید
3. یک محیط مجازی تمیز به نام venv در داخل آن دایرکتوری ایجاد کنید

آخرین دستور محیط مجازی را که ایجاد کرده اید فعال می کند.

در مرحله بعد، باید کتابخانه های مورد نیاز را نصب کنید. شما می توانید این کار را با استفاده از pip در محیط مجازی خود انجام دهید. کتابخانه ها را به صورت زیر نصب کنید:

این دستور دش و پانداها را در محیط مجازی شما نصب می کند. شما از نسخه های خاصی از این بسته ها استفاده خواهید کرد تا مطمئن شوید که محیطی مشابه با محیطی که در این آموزش استفاده می شود دارید. علاوه بر Dash، پانداها به شما کمک می کنند تا اطلاعاتی را که در برنامه تان استفاده می کنید، بخوانید و بحث کنید.

در نهایت، برای ورود به داشبورد خود به مقداری داده نیاز دارید. می توانید داده ها و همچنین کدهایی را که در سراسر این آموزش مشاهده می کنید با کلیک بر روی لینک زیر دانلود کنید:

کد منبع را دریافت کنید: اینجا را کلیک کنید تا کد منبع مورد استفاده خود را برای کسب اطلاعات در مورد ایجاد رابط های تجسم داده در پایتون با Dash در این آموزش کلیک کنید.

داده ها را به عنوان avocado. csv در فهرست اصلی پروژه ذخیره کنید. در حال حاضر، شما باید یک محیط مجازی با کتابخانه های مورد نیاز و داده های موجود در پوشه اصلی پروژه خود داشته باشید. ساختار پروژه شما باید به شکل زیر باشد:

شما خوب هستید که بروید! در مرحله بعد، اولین برنامه Dash خود را خواهید ساخت.

چگونه یک برنامه Dash بسازیم

برای اهداف توسعه، فکر کردن به فرآیند ساخت یک برنامه Dash در دو مرحله مفید است:

1. ظاهر برنامه خود را با استفاده از طرح بندی برنامه تعریف کنید.
2. برای تعیین اینکه کدام بخش های برنامه شما تعاملی هستند و به چه واکنشی نشان می دهند، از تماس های برگشتی استفاده کنید.

در این بخش، با چیدمان آشنا خواهید شد و در بخش بعدی، نحوه تعامل داشبورد خود را یاد خواهید گرفت. شما با تنظیم هر چیزی که برای مقداردهی اولیه برنامه خود نیاز دارید شروع می کنید و سپس طرح بندی برنامه خود را تعریف می کنید.

راه اندازی برنامه Dash شما

یک فایل خالی به نام app. py در دایرکتوری اصلی پروژه خود ایجاد کنید، سپس کد app. py را در این قسمت مرور کنید. برای سهولت در کپی کردن کد کامل، کل محتوای app. py را در انتهای این بخش خواهید دید.

در اینجا چند خط اول app. py آمده است:

در خطوط 1 تا 4، کتابخانه های مورد نیاز را وارد می کنید: dash، dash_core_components، dash_html_components، و pandas. هر کتابخانه یک بلوک ساختمانی برای برنامه شما فراهم می کند:

• dash به شما کمک می کند تا برنامه خود را مقداردهی اولیه کنید.
• dash_core_components به شما امکان می دهد اجزای تعاملی مانند نمودارها، کرکره ها یا محدوده تاریخ ایجاد کنید.
• dash_html_components به شما امکان می دهد به تگ های HTML دسترسی داشته باشید.
• پاندا به شما کمک می کند تا داده ها را بخوانید و سازماندهی کنید.

در خطوط 6 تا 9 ، داده ها را می خوانید و آن را برای استفاده در داشبورد از پیش پردازش می کنید. شما برخی از داده ها را فیلتر می کنید زیرا نسخه فعلی داشبورد شما تعاملی نیست ، و مقادیر ترسیم شده در غیر این صورت معنی ندارد.

در خط 11 ، شما نمونه ای از کلاس Dash را ایجاد می کنید. اگر قبلاً از Flask استفاده کرده اید ، ممکن است ابتدای کلاس DASH آشنا به نظر برسد. در فلاسک ، شما معمولاً یک برنامه WSGI را با استفاده از Flask (__ name__) آغاز می کنید. به همین ترتیب ، برای یک برنامه DASH ، از Dash (__ name__) استفاده می کنید.

تعریف طرح برنامه DASH شما

در مرحله بعد ، ویژگی طرح برنامه خود را تعریف خواهید کرد. این ویژگی ظاهر برنامه شما را دیکته می کند. در این حالت ، از عنوان با توضیحات زیر آن و دو نمودار استفاده خواهید کرد. در اینجا نحوه تعریف آن آورده شده است:

این کد ویژگی چیدمان شیء برنامه را تعریف می کند. این ویژگی ظاهر برنامه شما را با استفاده از ساختار درخت ساخته شده از اجزای داش تعیین می کند.

اجزای داش در کتابخانه های پایتون بسته بندی می شوند. برخی از آنها هنگام نصب با داش همراه هستند. بقیه شما باید جداگانه نصب کنید. تقریباً در هر برنامه دو مجموعه مؤلفه را مشاهده خواهید کرد:

1. بسته های پایتون را برای عناصر HTML در اختیار شما قرار می دهد. به عنوان مثال ، می توانید از این کتابخانه برای ایجاد عناصری مانند پاراگراف ، عناوین یا لیست استفاده کنید. انتزاع پایتون را برای ایجاد رابط های کاربر تعاملی در اختیار شما قرار می دهد. می توانید از آن برای ایجاد عناصر تعاملی مانند نمودارها ، کشویی ها یا کشویی استفاده کنید.

در خطوط 13 تا 20 ، می توانید اجزای Dash HTML را در عمل مشاهده کنید. شما با تعریف مؤلفه والدین ، یک html. div شروع می کنید. سپس دو عنصر دیگر ، یک عنوان (html. h1) و یک پاراگراف (html. p) را به عنوان فرزندان خود اضافه می کنید.

این مؤلفه ها معادل برچسب های Div ، H1 و P HTML هستند. می توانید از آرگومان های مؤلفه ها برای تغییر ویژگی ها یا محتوای برچسب ها استفاده کنید. به عنوان مثال ، برای مشخص کردن آنچه در برچسب DIV می رود ، از استدلال کودکان در HTML. DIV استفاده می کنید.

همچنین در مؤلفه ها ، مانند سبک ، نام کلاس یا شناسه ، استدلال های دیگری نیز وجود دارد که به ویژگی های برچسب های HTML اشاره دارد. خواهید دید که چگونه می توانید از برخی از این خصوصیات برای سبک کردن داشبورد خود در بخش بعدی استفاده کنید.

بخشی از طرح نشان داده شده در خطوط 13 تا 20 به کد HTML زیر تبدیل می شود:

این کد HTML هنگام باز کردن برنامه خود در مرورگر ارائه می شود. این همان ساختار کد پایتون شما را دنبال می کند ، با یک برچسب DIV حاوی یک عنصر H1 و P است.

در خطوط 21 تا 24 در قطعه کد چیدمان ، می توانید مؤلفه نمودار را از اجزای هسته Dash در عمل مشاهده کنید. دو مؤلفه DCC. Graph در App. Layout وجود دارد. اولی ، میانگین قیمت آووکادو را در طول دوره مطالعه می کند ، و دوم تعداد آووکادوهای فروخته شده در ایالات متحده را در همین مدت ترسیم می کند.

در زیر کاپوت ، Dash از platly. js برای تولید نمودارها استفاده می کند. اجزای DCC. Graph از یک شیء شکل یا یک فرهنگ لغت پایتون حاوی داده ها و طرح نقشه انتظار دارند. در این حالت ، شما دومی را ارائه می دهید.

سرانجام ، این دو خط کد به شما کمک می کند تا برنامه خود را اجرا کنید:

خطوط 48 و 49 امکان اجرای برنامه DASH خود را به صورت محلی با استفاده از سرور داخلی Flask امکان پذیر می کند. پارامتر DEBUG = واقعی از App. run_server گزینه بارگیری داغ را در برنامه شما امکان پذیر می کند. این بدان معنی است که وقتی در برنامه خود تغییری ایجاد می کنید ، بدون نیاز به راه اندازی مجدد سرور ، به طور خودکار بارگیری می شود.

سرانجام ، نسخه کامل App. py در اینجا آورده شده است. می توانید این کد را در App. py خالی که قبلاً ایجاد کرده اید کپی کنید.

این کد برای داشبورد برهنه است. این شامل تمام قطعه های کدی است که قبلاً در این بخش بررسی کرده اید.

اکنون زمان آن رسیده است که برنامه خود را اجرا کنید. یک ترمینال را در فهرست اصلی پروژه خود و در محیط مجازی پروژه باز کنید. Python App. py را اجرا کنید ، سپس به http: // localhost: 8050 با استفاده از مرورگر مورد نظر خود بروید.

زنده است! داشبورد شما باید به این شکل باشد:

خبر خوب این است که اکنون نسخه کاری داشبورد خود دارید. خبر بد این است که قبل از اینکه بتوانید این کار را به دیگران نشان دهید ، هنوز کارهایی باید انجام دهید. داشبورد به دور از بصری خوشایند است ، و شما هنوز هم باید تعامل به آن اضافه کنید.

اما نگران نباشید - یاد خواهید گرفت که چگونه این موارد را در بخش های بعدی برطرف کنید.

برنامه Dash خود را سبک کنید

Dash انعطاف پذیری زیادی را برای سفارشی سازی ظاهر برنامه خود در اختیار شما قرار می دهد. می توانید از پرونده های CSS یا JavaScript خود استفاده کنید ، یک Favicon (نماد کوچک نشان داده شده در مرورگر وب) و تصاویر را از جمله گزینه های پیشرفته دیگر تنظیم کنید.

در این بخش ، شما می آموزید که چگونه سبک های سفارشی را روی قطعات اعمال کنید ، و سپس داشبورد را که در بخش قبلی ساخته اید ، سبک می کنید.

نحوه استفاده از یک سبک سفارشی برای اجزای خود

شما می توانید از دو طریق مؤلفه ها را سبک کنید:

1. با استفاده از استدلال سبک اجزای فردی
2. تهیه یک پرونده CSS خارجی

استفاده از آرگومان سبک برای سفارشی کردن داشبورد شما ساده است. این استدلال یک فرهنگ لغت پایتون با جفت های ارزش کلیدی متشکل از نام خصوصیات CSS و مقادیری که می خواهید تنظیم کنید ، می گیرد.

توجه: هنگام مشخص کردن خصوصیات CSS در آرگومان سبک ، باید به جای کلمات جدا شده از Hyphen از نحو مخلوط استفاده کنید. به عنوان مثال ، برای تغییر رنگ پس زمینه یک عنصر ، باید از پس زمینه استفاده کنید و نه پس زمینه رنگ.

اگر می خواستید اندازه و رنگ عنصر H1 را در App. py تغییر دهید ، می توانید آرگومان سبک عنصر را به شرح زیر تنظیم کنید:

در اینجا ، شما می توانید یک فرهنگ لغت را با خواص و مقادیری که می خواهید برای آنها تعیین کنید ، سبک کنید. در این حالت ، سبک مشخص شده این است که دارای یک عنوان قرمز با اندازه قلم 48 پیکسل باشد.

نکته منفی در استفاده از استدلال سبک این است که به خوبی مقیاس نمی شود. اگر داشبورد شما دارای چندین مؤلفه است که می خواهید یکسان به نظر برسید ، در پایان می توانید کد زیادی از کد خود را تکرار کنید. در عوض ، می توانید از یک فایل CSS سفارشی استفاده کنید.

اگر می خواهید پرونده های محلی CSS یا JavaScript خود را درج کنید ، باید پوشه ای به نام دارایی/ در فهرست اصلی پروژه خود ایجاد کنید و پرونده هایی را که می خواهید در آنجا اضافه کنید ذخیره کنید. به طور پیش فرض ، DASH به طور خودکار هر پرونده موجود در دارایی ها را ارائه می دهد. این کار همچنین برای افزودن تصاویر مورد علاقه یا تعبیه ، همانطور که کمی مشاهده خواهید کرد ، کار خواهد کرد.

سپس می توانید از آرگومان های کلاس یا شناسه اجزای سازنده استفاده کنید تا سبک های آنها را با استفاده از CSS تنظیم کنید. این آرگومان ها هنگام تبدیل شدن به برچسب های HTML با ویژگی های کلاس و شناسه مطابقت دارند.

اگر می خواهید اندازه قلم و رنگ متن عنصر H1 را در App. py تنظیم کنید ، می توانید از آرگومان ClassName به شرح زیر استفاده کنید:

تنظیم آرگومان ClassName ویژگی کلاس را برای عنصر H1 تعریف می کند. سپس می توانید از یک فایل CSS در پوشه دارایی استفاده کنید تا مشخص کنید که چگونه می خواهید به نظر برسد:

شما از یک انتخاب کننده کلاس برای قالب بندی عنوان در پرونده CSS خود استفاده می کنید. این انتخاب کننده قالب عنوان را تنظیم می کند. همچنین می توانید از آن با عنصر دیگری استفاده کنید که باید با تنظیم ClassName = "header-title" فرمت را به اشتراک بگذارد.

بعد ، داشبورد خود را سبک خواهید کرد.

چگونه می توان ظاهر داشبورد خود را بهبود بخشید

شما فقط اصول اولیه یک ظاهر طراحی شده را در Dash پوشانده اید. اکنون ، یاد می گیرید که چگونه ظاهر داشبورد خود را سفارشی کنید. شما این پیشرفت ها را انجام خواهید داد:

• یک Favicon و عنوان را به صفحه اضافه کنید
• خانواده قلم داشبورد خود را تغییر دهید
• از یک فایل CSS خارجی برای سبک های داش استفاده کنید

شما با یادگیری نحوه استفاده از دارایی های خارجی در برنامه خود شروع خواهید کرد. این به شما امکان می دهد یک فاویکون، یک خانواده فونت سفارشی و یک شیوه نامه CSS اضافه کنید. سپس یاد می گیرید که چگونه از آرگومان className برای اعمال سبک های سفارشی به اجزای Dash خود استفاده کنید.

افزودن دارایی های خارجی به برنامه شما

پوشه ای به نام assets/ در دایرکتوری ریشه پروژه خود ایجاد کنید. یک فاویکون را از پروژه منبع باز Twemoji دانلود کنید و آن را به عنوان favicon. ico در assets/ ذخیره کنید. در نهایت، یک فایل CSS در assets/ به نام style. css و کد آن در قسمت جمع شونده زیر ایجاد کنید.

دارایی ها/فایل شامل سبک هایی است که روی اجزای طرح بندی برنامه خود اعمال خواهید کرد. در حال حاضر، ساختار پروژه شما باید به شکل زیر باشد:

هنگامی که سرور را راه اندازی می کنید، Dash به طور خودکار فایل های موجود در دارایی ها را ارائه می دهد. شما شامل دو فایل در assets/ می شوید: favicon. ico و style. css. برای تنظیم یک فاویکون پیش فرض، نیازی به انجام مراحل اضافی ندارید. برای استفاده از سبک هایی که در style. css تعریف کرده اید، باید از آرگومان className در اجزای Dash استفاده کنید.

app. py به چند تغییر نیاز دارد. شما یک برگه سبک خارجی اضافه می کنید، عنوانی را به داشبورد خود اضافه می کنید و با استفاده از فایل style. css به مؤلفه ها استایل می دهید. تغییرات زیر را مرور کنید. سپس، در قسمت آخر این بخش، کد کامل نسخه به روز شده app. py را پیدا خواهید کرد.

در اینجا نحوه اضافه کردن یک شیوه نامه خارجی و اضافه کردن عنوان به داشبورد خود آورده شده است:

در خطوط 11 تا 18، یک فایل CSS خارجی، یک خانواده فونت، را مشخص می کنید که می خواهید در برنامه خود بارگذاری کنید. فایل های خارجی به تگ head برنامه شما اضافه می شوند و قبل از بارگیری بدنه برنامه شما بارگذاری می شوند. شما از آرگومان exteal_stylesheets برای افزودن فایل های CSS خارجی یا exteal_scripts برای فایل های جاوا اسکریپت خارجی مانند Google Analytics استفاده می کنید.

در خط 19، عنوان درخواست خود را تعیین می کنید. این متنی است که در نوار عنوان مرورگر وب شما، در نتایج جستجوی Google و در کارت های رسانه های اجتماعی هنگام اشتراک گذاری سایت خود ظاهر می شود.

سفارشی کردن سبک کامپوننت ها

برای استفاده از استایل ها در style. css، باید از آرگومان className در اجزای Dash استفاده کنید. کد زیر یک className با انتخابگر کلاس مربوطه به هر یک از مؤلفه هایی که هدر داشبورد شما را تشکیل می دهند اضافه می کند:

در خطوط 21 تا 37 می بینید که دو تغییر در نسخه اولیه داشبورد ایجاد شده است:

1. یک عنصر پاراگراف جدید با شکلک آووکادو وجود دارد که به عنوان لوگو عمل می کند.
2. در هر مؤلفه یک آرگومان کلاس وجود دارد. این نام های کلاس باید با یک انتخاب کننده کلاس در Style. css مطابقت داشته باشند ، که ظاهر هر مؤلفه را تعریف می کند.

به عنوان مثال ، کلاس-توصیف هدر که به مؤلفه پاراگراف اختصاص داده شده با "تجزیه و تحلیل رفتار قیمت آووکادو" اختصاص داده شده است ، دارای یک انتخاب کننده مربوطه در سبک است. CSS:

خطوط 29 تا 34 از Style. css فرمت انتخاب کننده کلاس هدر را تعریف می کند. اینها باعث تغییر رنگ ، حاشیه ، تراز و حداکثر عرض هر مؤلفه با نام کلاس = "هدر-شرح" می شود. همه مؤلفه ها در پرونده CSS انتخاب کننده کلاس مربوطه را دارند.

تغییر قابل توجه دیگر در نمودارها است. در اینجا کد جدید نمودار قیمت وجود دارد:

در این کد ، یک نام کلاس و چند سفارشی سازی را برای پارامترهای پیکربندی و شکل نمودار خود تعریف می کنید. در اینجا تغییرات وجود دارد:

• خط 43: نوار شناور را که به طور پیش فرض نشان داده می شود ، حذف می کنید.
• خطوط 50 و 51: شما الگوی شناور را به گونه ای تنظیم می کنید که وقتی کاربران در یک نقطه داده حرکت می کنند ، قیمت دلار را نشان می دهد. به جای 2. 5 ، 2. 5 دلار نشان می دهد.
• خطوط 54 تا 66: شما محور ، رنگ شکل و قالب عنوان را در بخش طرح بندی نمودار تنظیم می کنید.
• خط 69: شما نمودار را در یک کلاس "کارت" در یک html. div می بندید. این به نمودار یک پس زمینه سفید می دهد و سایه کوچکی را در زیر آن اضافه می کند.

تنظیمات مشابهی با نمودارهای فروش و حجم وجود دارد. شما می توانید کسانی را که در کد کامل برای برنامه به روز شده در بخش جمع آوری شده در زیر مشاهده می کنید ، مشاهده کنید.

این نسخه به روز شده App. py است. این تغییرات مورد نیاز در کد را برای اضافه کردن یک Favicon و یک عنوان صفحه ، به روزرسانی خانواده قلم و استفاده از یک فایل CSS خارجی دارد. پس از این تغییرات ، داشبورد شما باید به این شکل باشد:

در بخش بعدی ، یاد می گیرید که چگونه اجزای تعاملی را به داشبورد خود اضافه کنید.

با استفاده از تماس های تماس تلفنی ، تعامل را به برنامه های داش خود اضافه کنید

در این بخش ، یاد می گیرید که چگونه عناصر تعاملی را به داشبورد خود اضافه کنید.

تعامل داش بر اساس یک الگوی برنامه نویسی واکنشی است. این بدان معنی است که می توانید مؤلفه ها را با عناصر برنامه خود که می خواهید به روز کنید پیوند دهید. اگر کاربر با یک مؤلفه ورودی مانند کشویی یا کشویی دامنه در تعامل باشد ، خروجی مانند نمودار به طور خودکار در برابر تغییرات ورودی واکنش نشان می دهد.

حالا بیایید داشبورد شما را تعاملی کنیم. این نسخه جدید داشبورد شما به کاربر امکان می دهد با فیلترهای زیر تعامل داشته باشد:

• منطقه
• نوع آووکادو
• محدوده زمانی

با جایگزین کردن برنامه محلی خود با نسخه جدید در بخش قابل جمع شدن در زیر شروع کنید.