dcc. graph

از مؤلفه DCC. Graph می توان برای ارائه هرگونه تجسم داده های با قدرت استفاده کرد ، که به عنوان آرگومان شکل منتقل می شود.

آغازگر در کتابخانه نمودار نمودار

• کتابخانه نمودار نمودار ، معروف به بسته بندی ، "ارقام" را تولید می کند. این موارد در dcc. graph با مثال استفاده می شود. dcc. graph (شکل = شکل) با شکل یک شکل طرح ریزی.
• برای شروع کار با طرح ریزی ، یاد بگیرید که چگونه مستندات آن سازماندهی شده است:
  1. معماری شکل را بیاموزید: https://plotly.com/python/creating-and-updating-figures/
  2. هر نوع نمودار مجموعه ای از نمونه ها را در یک URL منحصر به فرد دارد. خود را با ساختار این صفحات آشنا کنید. Google دوست شماست. به عنوان مثال "هیستوگرام در پایتون" در https://plotly.com/python/histograms ثبت شده است
  3. Plotly Express رابط سطح بالا توصیه می شود. درک کنید که با خواندن 1. هنگامی که ساختار آن را درک کردید ، می توانید تمام آرگومان ها را در صفحه "مرجع API" که در اینجا ثبت شده است مشاهده کنید: https://plotly.com/python-api-referfer/plotly. express.html
  4. هر جنبه ای از نمودار قابل تنظیم است. برای درک رابط شکل سطح پایین و نحوه اصلاح خصوصیات یک شکل تولید شده ، از طریق 1 بخوانید. پس از درک آن ، با مراجعه به صفحه "مرجع شکل" در https://plotly.com/python/reference ، تمام خصوصیات را مشاهده کنید.
  5. اگر نمی توانید نمودار را به راحتی با PX تولید کنید ، پس از آن ساختار Graph_Objects را با خواندن 1 و درک ساختار شکل vihttps: //plotly.com/python/reference یاد بگیرید.
• Plotly از 40-50 نوع نمودار مختلف پشتیبانی می کند. با پیمایش https://plotly.com/python/ بیشتر بدانید.
• در توسعه ، می توانید با اجرای برنامه های DASH یا در محیط های دیگر مانند Jupyter ، کنسول خود و موارد دیگر ، ارقام ایجاد کنید. اگر از رابط خارج از داش استفاده می کنید ، پس از آن با شکل. show () همیشه نمودار را نمایش می دهد (یا در مرورگر یا خطی مستقیم در محیط خود).
• برای دیدن همه این محیط های ارائه دهنده ، به https://plotly.com/python/renderers/ مراجعه کنید.

مثال ها

بیان در خط داش

شی FIG مستقیماً به خاصیت شکل DCC. Graph منتقل می شود:

از واردات DASH DCC Importly. Express as PX Df = PX. Data. Iris () # Iris یک Pandas Dataframe شکل = px. scatter (df ، x = "sepal_width" ، y = "sepal_l طول") dcc. graph (شکل= انجیر) 

با استفاده از رابط سطح پایین با go. figure

با استفاده از رابط سطح پایین با go. figure

برای کسب اطلاعات بیشتر در مورد تفاوت بین px & go. figure ، از طریق (1) در بالا بخوانید.

از وارد کردن DASH DCC واردات plotly. graph_objs به عنوان go شکل = go. figure (data = [go. scatter (x = [1 ، 2 ، 3] ، y = [4 ، 1 ، 2]))) dcc. graph (شکل= انجیر) 

با استفاده از رابط سطح پایین با Dicts & Lists

برای کسب اطلاعات بیشتر در مورد تفاوت بین PX ، Go. Figure و Dicts & Lists ، از طریق (1) در بالا بخوانید.

از Dash Import DCC DCC. Graph (شکل =<'data': [ , , ], 'layout': <'title': 'Dash Data Visualization'>> ) 

نمودار تعاملی با تماس تلفنی

آموزش تجسم تعاملی توضیح می دهد که چگونه می توان رویدادهای تعامل کاربر را با DCC. Graph ضبط کرد ، و نحوه به روزرسانی ویژگی شکل در تماس با تماس.

برخی از ویژگی های پیشرفته در پست های انجمن انجمن مستند شده است: * نحوه حفظ حالت UI (سطح بزرگنمایی و غیره) هنگام به روزرسانی نمودار در یک تماس تلفنی https://community. plot. ly/t/preserving-ui-state-LIKE-ZOOM-in-DCC-GRAPH-WITH-UIREVISION/15793 * انتقال نمودار برای انتقال صاف یا انیمیشن ها در به روزرسانی های نمودار https://community. plot. ly/t/exploring-a-transitions-api-for-dcc-Graph/15468

کنترل نسخه plotly. js استفاده شده توسط dcc. graph

مؤلفه نمودار از کتابخانه plotly. js برای ارائه تجسم استفاده می کند. مؤلفه نمودار با نسخه خاص کتابخانه plotly. js همراه است ، اما می توانید با قرار دادن یک بسته نرم افزاری plotly. js در فهرست دارایی ها ، آن را نادیده بگیرید. این تکنیک می تواند مورد استفاده قرار گیرد: * از ویژگی های جدید در نسخه ای از plotly. js استفاده کنید که جدیدتر از نسخه ای است که در نسخه نصب شده در حال حاضر DASH_CORE_COMPENTS (یا کیت طراحی شرکت Dash) گنجانده شده است.* از رفتار مطلوب تر نسخه ای از plotly. js استفاده کنید که کمتر از نسخه ای است که در نسخه نصب شده در حال حاضر DASH_CORE_COMPONTENTS (یا کیت طراحی شرکت Dash) گنجانده شده است. ما در تلاش هستیم تا Plotly. js را کاملاً سازگار با عقب بسازیم ، بنابراین لازم نیست که این کار را اغلب انجام دهید.* از بسته نرم افزاری جزئی یا یک بسته بندی جزئی ساخته شده استفاده کنید. بسته های جزئی از بسته های کامل Plotly. js که دارای مؤلفه نمودار هستند ، کوچکتر هستند و بنابراین می توانند زمان بارگیری برنامه شما را بهبود بخشند.

برای اطلاعات بیشتر در مورد plotly. js ، به اسناد رسمی کتابخانه و repo plotly. js در GitHub مراجعه کنید.

plotly. py همچنین از plotly. js استفاده می کند. نسخه های plotly. js که به طور پیش فرض در plotly. py ، dcc. graph dash dash و dash طراحی شده است. یکی دیگر.

لاتکس

DCC. Graph از ارائه لاتکس در عناوین ، برچسب ها و حاشیه نویسی پشتیبانی می کند. از MathJax نسخه 3. 2 استفاده می کند و با تنظیم MathJax = True روی مؤلفه می توان آن را فعال کرد. محتوا را با MathJax بین محدود کننده $ قرار دهید. اگر به یک لفظ $ $ نیاز دارید ، از HTML Entity &#36 استفاده کنید. بشربرای شامل متن در محدود کننده های MathJax ، از متن استفاده کنید. در مثال زیر (شعاع خورشیدی) به عنوان متن در yaxis_title گنجانده شده است.

از Dash Import Dash ، DCC ، HTML Importly. Express as PX شکل = px. line (x = [1 ، 2 ، 3 ، 4] ، y = [1 ، 4 ، 9 ، 16] ، عنوان = r '$  alpha_ = 352  pm 11  متن^$ ') fig. update_layout (xaxis_title = r' $  sqrt<(n_	ext(t|>))>$ '، yaxis_title = r' $ d ، r  text<(solar radius)>$ ') برنامه = dash (__ name__) app. layout = html. div ([dcc. markdown (' '## لاتکس در یک مؤلفه علامت گذاری: این مثال از تعیین کننده بلوک استفاده می کند: $ $ \ frac<(\sqrt<\phi \sqrt<5>>-\phi) e^> = 1+\frac>>>>>>>$ $ این مثال از تعیین کننده درون خطی استفاده می کند: $ e^2 = m^2c^4+p^2c^2 $ ## لاتکس در یک مؤلفه نمودار: '' '، mathjax = true) ، dcc. graph (mathjax = true، شکل = شکل)]) اگر __name__ == '__main__': app. run_server (debug = true) 

لاتکس در یک مؤلفه علامت گذاری:

این مثال از تعیین کننده درون خطی استفاده می کند: $ e^2 = m^2c^4+p^2c^2 $

لاتکس در یک جزء نمودار:

هنگام نمایش در نمودارهای پای ، در حال حاضر در HoverText ، TextTemplate ، TickText ، متن در میله های نمودار نوار یا برچسب ها پشتیبانی نمی شود. اگر شما یا شرکت خود دوست دارید از پیشرفت های LaTex در Dash حمایت مالی کنید ، با تیم توسعه پیشرفته ما در تماس باشید.

برای مقدمه ای در ریاضی لاتکس ، به لاتکس/ریاضیات مراجعه کنید.

تغییر اندازه و پاسخگویی نمودار

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

رفتار پیش فرض plotly. js حاکی از آن است که نمودار باید تغییر اندازه پنجره را تغییر اندازه دهد. با این حال ، در برخی موارد ، شما ممکن است بخواهید به جای آن ، نمودار را بر اساس اندازه ظرف والدین آن تغییر اندازه دهید.(می توانید اندازه ظرف والدین را با سبک. ویژگی های سبک و سبک. عرض.) تنظیم کنید.)

خاصیت پاسخگو از مؤلفه dcc. graph به شما امکان می دهد رفتار مورد نظر خود را تعریف کنید. به طور خلاصه ، آن را به عنوان یک مقدار واقعی ، نادرست یا "خودکار" می پذیرد: * واقعی این نمودار را مجبور می کند که بدون توجه به مشخصات دیگر در شکل ، به پنجره و تغییر اندازه والدین پاسخگو باشد.-پاسخگو به پنجره و تغییر اندازه والدین ، صرف نظر از مشخصات دیگر در شکل. layout یا پیکربندی * 'auto' رفتار میراث را حفظ می کند (اندازه و قابلیت انعطاف پذیری توسط مقادیر مشخص شده در شکل و پیکربندی تعیین می شود)

چگونه تغییر اندازه کار می کند - پیشرفته

خصوصیات DCC. Graph که می تواند اندازه نمودار را کنترل کند (غیر از پاسخگو) عبارتند از: * figure. layout. height - صریحاً ارتفاع * figure. layout. width - را صریح تنظیم می کند * شکل * شکل. layout. autosiz e-اگر درست باشد ، ارتفاع و عرض نمودار را به آن از ظرف والدین خود تنظیم می کند * پیکربندی. پاسخگو - اگر درست باشد ، ارتفاع و عرض نمودار را بر روی پنجره تغییر می دهد.

خاصیت پاسخگو در رابطه با ویژگی های فوق به روش زیر کار می کند:

• درست: Config. Repsive و Figure. Layout. Autosize با مقادیر واقعی نادیده گرفته می شوند ، و figure. layout. height و figure. layout. width غیرقانونی هستند
• false: config. respenive و figure. layout. Autosize هر دو با مقادیر کاذب ناپدید می شوند
• "خودکار": قابلیت انعطاف پذیری طرح به همان روشی که قبلاً انجام می شد (یعنی با چهار خاصیت فوق) تعیین می شود

خصوصیات نمودار

به این مستندات در ترمینال پایتون خود دسترسی پیدا کنید: `` `Python

راهنما (dash. dcc. graph) `` `

IDE توصیه شده ما برای نوشتن برنامه های DASH ، فضای کاری علوم داده Dash Enterprise است که دارای پشتیبانی Typeahead برای خصوصیات مؤلفه DASH است. دریابید که آیا شرکت شما از Dash Enterprise استفاده می کند یا خیر.

شناسه (رشته ؛ اختیاری): شناسه این مؤلفه ، که برای شناسایی اجزای داش در تماس تلفنی استفاده می شود. شناسه باید در تمام مؤلفه های یک برنامه منحصر به فرد باشد.

پاسخگو (مقداری برابر با: درست ، نادرست یا "خودکار" ؛ پیش فرض "خودکار"): اگر درست باشد ، طرح plotly. js کاملاً پاسخگو به تغییر اندازه پنجره و رویداد تغییر اندازه والدین خواهد بود. این امر با غلبه بر پیکربندی. پاسخگو به True ، figure. layout. autosize به شکل واقعی و ناخوشایند است. اگر نادرست باشد ، طرح plotly. js پاسخگو به تغییر اندازه پنجره و رویداد تغییر اندازه عنصر والدین نیست. این امر با غلبه بر پیکربندی. پاسخگو به false و figure. layout. autosize to false است. اگر "خودکار" (پیش فرض) باشد ، نمودار تعیین می کند که آیا طرح plotly. js می تواند کاملاً پاسخگو (درست) باشد یا نه (نادرست) بر اساس مقادیر موجود در پیکربندی. پاسخگو ، شکل. layout. autosize ، شکل. ارتفاع ، شکل. layout. width. این رفتار میراث مؤلفه نمودار است. باید با ابعاد / یک ظاهر طراحی شده مناسب از طریق سبک استفاده شود تا به طور کامل عملی شود.

clickdata (دیکته ؛ اختیاری): داده های مربوط به آخرین رویداد کلیک. فقط خواندنی.

ClickAotationData (DICT ؛ اختیاری): داده های مربوط به آخرین رویداد حاشیه نویسی کلیک. فقط خواندنی.

Hoverdata (DICT ؛ اختیاری): داده های مربوط به آخرین رویداد Hover. فقط خواندنی.

clear_on_unhover (بولی ؛ پیش فرض کاذب): اگر درست باشد ، CLEAR_ON_UNHOVER هنگامی که کاربر "از یک نقطه" از یک نقطه "غافلگیر" می کند ، ویژگی Hoverdata را پاک می کند. اگر نادرست باشد ، پس از آن ویژگی Hoverdata برابر با داده های آخرین نقطه ای که در آن آویزان شده است ، خواهد بود.

SelectedData (DICT ؛ اختیاری): داده های مربوط به آخرین رویداد انتخاب. فقط خواندنی.

RelayoutData (DICT ؛ اختیاری): داده های مربوط به آخرین رویداد Relayout که هنگام زوم کردن یا تابه های کاربر در طرح یا سایر ویرایش های سطح طرح رخ می دهد ، رخ می دهد. این فرم را توصیف می کند که تغییرات ایجاد شده را توصیف می کند. فقط خواندنی.

extenddata (لیست | دیکته ؛ اختیاری): داده هایی که باید به آثار موجود اضافه شوند. دارای فرم [به روز شده ، ردیابی ، MaxPoints] است ، جایی که به روز شده یک شیء است که حاوی داده ها برای گسترش است ، TraceIndices (اختیاری) مجموعه ای از شاخص های ردیابی است که باید گسترش یابد ، و MaxPoints (اختیاری) یا یک عدد صحیح است که حداکثر شماره را تعیین می کنداز نقاط مجاز یا یک شی با کلید: جفت های ارزش مطابقت با مرجع به روز شده referateA. extEndTraces API برای استفاده کامل: https://plotly.com/javascript/plotlyjs-function-reference/#plotlyextendtraces.

prependdata (لیست | دیکته ؛ اختیاری): داده هایی که باید برای آثار موجود پیش بینی شود. دارای فرم [به روز شده ، ردیابی ، MaxPoints] است ، که در آن به روز شده یک شیء است که حاوی داده ها برای پیش بینی است ، TraceIndices (اختیاری) مجموعه ای از شاخص های ردیابی است که باید پیش بینی شود ، و MaxPoints (اختیاری) یا یک عدد صحیح است که حداکثر تعداد را تعیین می کنداز نقاط مجاز یا یک شی با کلید: جفت ارزش تطبیق به روز شده مرجع به صورت plotly. prependtraces api برای استفاده کامل: https://plotly.com/javascript/plotlyjs-function-reference/#plotlypredtraces.

Restyledata (لیست ؛ اختیاری): داده های مربوط به آخرین رویداد Restyle که وقتی کاربر یک مورد افسانه را تغییر می دهد ، انتخاب Parcoords یا سایر ویرایش های سطح ردیابی را تغییر می دهد. دارای فرم [ویرایش ها ، شاخص ها] است ، جایی که ویرایش ها شیء است که تغییرات ایجاد شده را توصیف می کند ، و شاخص ها مجموعه ای از شاخص های ردیابی است که ویرایش شده اند. فقط خواندنی.

شکل (دیکته ؛ پیش فرض, frames: [],>): شیء شکل. به طرحواره مراجعه کنید: https://plotly.com/javascript/reference پیکربندی جداگانه توسط ویژگی پیکربندی تنظیم شده است.

شکل یک دیکته با کلیدها است:

سبک (دیکته ؛ اختیاری): سبک عمومی بر روی قطعه قطعه غلبه می کند.

نام کلاس (رشته ؛ اختیاری): نام کلاس DIV والدین.

Mathjax (بولی ؛ پیش فرض کاذب): اگر درست باشد ، Mathjax V3 (Tex-SVG) را وارد صفحه می کند و از آن در نمودار استفاده می کند.

animate (بولی؛ نادرست پیش فرض): بتا: اگر درست است، با استفاده از تابع متحرک plotly. js بین به روزرسانی ها متحرک کنید.

animation_options ( dict ; پیش فرض، انتقال:,>): بتا: شی حاوی تنظیمات انیمیشن. فقط در صورتی اعمال می شود که متحرک درست باشد.

config ( dict ; اختیاری): گزینه های پیکربندی Plotly. js. برای اطلاعات بیشتر به https://plotly.com/javascript/configuration-options/ مراجعه کنید.

config یک دستور با کلیدها است:

• autosizable (بولی؛ اختیاری): بدون در نظر گرفتن layout. autosize یکبار اندازه خودکار را انجام دهید (در غیر این صورت از مقادیر پیش فرض عرض یا ارتفاع استفاده کنید).
• displayModeBar (مقداری برابر با: true، false یا "hover"؛ اختیاری): نوار حالت را نمایش دهید (True، False یا "Hover").
• displaylogo (بولی؛ اختیاری): لوگوی نموداری را در انتهای نوار حالت اضافه کنید.
• doubleClick (مقداری برابر با: false، "reset"، "autosize" یا "reset+autosize"؛ اختیاری): تعامل دوبار کلیک (نادرست، "تنظیم مجدد"، "autosize" یا "reset+autosize").
• doubleClickDelay (تعداد ؛ اختیاری): تاخیر برای ثبت یک رویداد دوبار کلیک در ms. حداقل مقدار 100 و حداکثر مقدار 1000 است. به طور پیش فرض این 300 است.
• editSelection ( بولی ؛ اختیاری): انتخاب های متحرک را فعال می کند.
• قابل ویرایش (بولی؛ اختیاری): ما می توانیم عناوین را ویرایش کنیم، حاشیه نویسی ها را جابه جا کنیم، و غیره - تمام قسمت های ویرایش را تنظیم می کنیم، مگر اینکه یک آیتم پیکربندی ویرایش های جداگانه بخش های جداگانه را لغو کند.
• ویرایش ها ( dict ; اختیاری): مجموعه ای از ویژگی های قابل ویرایش. ویرایش ها دستوری است با کلیدهای:
  • aotationPosition (بولی؛ اختیاری): لنگر اصلی حاشیه نویسی که متن (اگر فلش نباشد) یا فلش است (که کل چیز را می کشد و طول و جهت فلش را بدون تغییر می گذارد).
  • aotationTail ( بولی ؛ اختیاری): فقط برای حاشیه نویسی با فلش، طول و جهت فلش را تغییر دهید.
  • aotationText (بولی؛ اختیاری)
  • axisTitleText (بولی؛ اختیاری)
  • colorbarPosition (بولی؛ اختیاری)
  • colorbarTitleText (بولی؛ اختیاری)
  • legendPosition (بولی؛ اختیاری)
  • legendText (بولی؛ اختیاری): فیلدهای نام ردیابی را از افسانه ویرایش کنید.
  • shapePosition (بولی؛ اختیاری)
  • titleText (بولی؛ اختیاری): layout. title جهانی.
  • نام فایل ( رشته ؛ اختیاری): نامی که به فایل دانلود شده داده می شود.
  • فرمت (مقداری برابر با: «jpeg»، «png»، «webp» یا «svg»؛ اختیاری): فرمت فایلی که باید ایجاد شود.
  • ارتفاع (عدد؛ اختیاری): ارتفاع فایل دانلود شده، بر حسب پیکسل.
  • مقیاس (عدد؛ اختیاری): وضوح اضافی برای ارائه فایل پس از رندر کردن آن با عرض و ارتفاع داده شده.
  • عرض (عدد؛ اختیاری): عرض فایل دانلود شده، بر حسب پیکسل.

  loading_state ( dict ; optional) : آبجکتی که آبجکت حالت بارگیری که از dash-renderer می آید را نگه می دارد.

  loading_state یک دستور با کلیدها است:

  • component_name ( string ; optional): نام کامپوننتی را که در حال بارگیری است را نگه می دارد.
  • is_loading (بولی؛ اختیاری): تعیین می کند که آیا کامپوننت در حال بارگیری است یا خیر.
  • prop_name ( string ; optional): مشخص می کند کدام ویژگی در حال بارگیری است.