آموزش: نمودار بار بسازید

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

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

• قابلیت های بصری خود را تعریف کنید
• کد منبع مورد استفاده برای ساخت بصری را درک کنید
• بصری را ارائه دهید
• اشیاء را به صفحه Properties اضافه کنید
• بسته بندی را بسته بندی کنید

محیط خود را تنظیم کنید

قبل از شروع به توسعه Power BI Visual ، تأیید کنید که همه چیز را در این بخش ذکر کرده اید.

یک حساب Power BI Pro یا حق بیمه برای هر کاربر (PPU). اگر یکی ندارید ، برای یک آزمایش رایگان ثبت نام کنید.

کد استودیو ویژوال (کد vs). VS Code یک محیط توسعه یکپارچه ایده آل (IDE) برای توسعه برنامه های JavaScript و TypeScript است.

Windows PowerShell نسخه 4 یا بالاتر (برای ویندوز). یا ترمینال (برای OSX).

محیطی آماده برای توسعه یک قدرت بینایی. محیط خود را برای ایجاد یک قدرت بصری تنظیم کنید.

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

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

ایجاد تصویری نمودار نوار مراحل زیر را شامل می شود:

یک پروژه جدید ایجاد کنید

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

• تصویری جدید ایجاد کنید
• کد منبع کلون

PowerShell را باز کنید و به پوشه ای که می خواهید پروژه خود را در آن ایجاد کنید حرکت کنید.

دستور زیر را وارد کنید:

اکنون باید پوشه ای به نام بارچارت داشته باشید که حاوی پرونده های ویژوال است.

در VS Code ، پرونده [tsconfig. json] (visual-project-structure. md#tsconfigsson) را باز کنید و نام "پرونده ها" را به "src/barchart. ts" تغییر دهید.

شیء tsconfig. json "پرونده ها" به پرونده ای که کلاس اصلی بصری در آن قرار دارد ، اشاره می کند.

پرونده نهایی tsconfig. json شما باید به این شکل باشد.

پرونده pack. json شامل لیستی از وابستگی های پروژه است. پرونده Project. json خود را با این یکی جایگزین کنید.

اکنون باید یک پوشه جدید برای بصری خود با پرونده ها و پوشه های زیر داشته باشید:

برای توضیح دقیق عملکرد هر یک از این پرونده ها ، به ساختار پروژه Power Bi Visual Project مراجعه کنید.

دو پرونده ای که ما در این آموزش به آنها توجه خواهیم کرد ، پرونده campabilities. json است که تصویری را به میزبان توصیف می کند ، و پرونده SRC/BARCHART. TS ، که شامل API Visual's است.

قابلیت ها را تعریف کنید

پرونده campabilities. json جایی است که ما داده ها را به میزبان وصل می کنیم. ما نوع زمینه های داده ای را که می پذیرند توصیف می کنیم و چه ویژگی هایی را باید داشته باشد.

نقش داده ها را تعریف کنید

متغیرها در بخش Dataroles پرونده قابلیت ها تعریف و محدود می شوند. ما می خواهیم نمودار نوار ما دو نوع متغیر را بپذیرد:

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

در کد Visual Studio ، در پرونده campabilities. json ، تأیید کنید که قطعه JSON زیر در شیء با عنوان "Dataroles" ظاهر می شود.

داده ها را نقشه برداری کنید

در مرحله بعد ، نقشه برداری داده ها را اضافه کنید تا به میزبان بگویید که با این متغیرها چه کاری باید انجام دهد:

محتوای شی "DataViewMappings" را با کد زیر جایگزین کنید:

کد فوق "شرایطی" را ایجاد می کند که هر شیء از طریق صفحه می تواند فقط یک قسمت را در یک زمان نگه دارد. توجه کنید که ما از نام داخلی Data-Role برای مراجعه به هر قسمت استفاده می کنیم.

همچنین نقشه برداری داده های طبقه بندی شده را به گونه ای تنظیم می کند که هر قسمت به متغیر صحیح نقشه برداری شود.

اشیاء را برای صفحه Properties تعریف کنید

بخش "اشیاء" پرونده قابلیت ها جایی است که ما ویژگی های قابل تنظیم را که باید در صفحه فرمت ظاهر شود تعریف می کنیم. این ویژگی ها بر محتوای نمودار تأثیر نمی گذارد اما می تواند ظاهر و احساس آن را تغییر دهد.

برای اطلاعات بیشتر در مورد اشیاء و نحوه کار آنها ، به اشیاء مراجعه کنید.

اشیاء زیر اختیاری هستند. اگر می خواهید بخش های اختیاری این آموزش را اضافه کنید تا رنگ ها را اضافه کنید و محور x را اضافه کنید ، آنها را اضافه کنید.

محتوای بخش "اشیاء" را با کد زیر جایگزین کنید:

فایل. json را ذخیره کنید.

پرونده نهایی قابلیت های شما باید در این مثال به نظر برسد.

API بصری

همه تصاویر با کلاس شروع می شوند که رابط بی نظیر را پیاده سازی می کند. پرونده SRC/Visual. ts پرونده پیش فرض است که شامل این کلاس است.

در این آموزش ، ما با پرونده ivisual barchart. ts تماس خواهیم گرفت. اگر قبلاً این کار را نکرده اید ، فایل را بارگیری کرده و آن را در پوشه /SRC ذخیره کنید. در این بخش ، ما این پرونده را با جزئیات انجام می دهیم و بخش های مختلف را شرح می دهیم.

وارد کردن

بخش اول پرونده ماژول هایی را که برای این بصری لازم است وارد می کند. توجه کنید که علاوه بر ماژول های بصری Power BI ، ما کتابخانه D3 را نیز وارد می کنیم.

ماژول های زیر به پرونده barchart. ts شما وارد می شوند:

رابط

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

• بارشارتداتاپه
• بارچارتوی
• بارشارتز

این رابط ها به شرح زیر تعریف شده اند:

تغییر بصری

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

DataView شامل داده هایی است که باید تجسم شود. این داده ها می توانند به اشکال مختلفی مانند طبقه بندی یا جدولی باشند. برای ساختن یک تصویری طبقه بندی شده مانند نمودار نوار ، از ویژگی طبقه بندی شده در Dataview استفاده کنید.

این عملکرد هر زمان که تصویری به روز شود ، نامیده می شود.

چند عملکرد بعدی در پرونده Barchart. ts با رنگ و ایجاد محور X سروکار دارد. اینها اختیاری هستند و در این آموزش بیشتر مورد بحث قرار می گیرند. این آموزش از عملکرد ivisual ادامه خواهد یافت.

بصری را ارائه دهید

پس از تعریف داده ها ، ما با استفاده از کلاس Barchart که رابط Ivisual را پیاده سازی می کند ، بصری را ارائه می دهیم. رابط iVisual در صفحه API بصری شرح داده شده است. این شامل یک روش سازنده است که روش بصری و بروزرسانی را ایجاد می کند که هر بار که بارگیری مجدد آن نامیده می شود. قبل از ارائه بصری ، ما باید اعضای کلاس را اعلام کنیم:

بصری را بسازید

عملکرد سازنده فقط یک بار نامیده می شود ، هنگامی که بصری برای اولین بار ارائه می شود. این ظروف SVG خالی را برای نمودار نوار و محور x ایجاد می کند. توجه کنید که از کتابخانه D3 برای ارائه SVG استفاده می کند.

تصویری را به روز کنید

روش بروزرسانی هر بار اندازه بصری یا یکی از مقادیر آن تغییر می کند.

مقیاس بندی

ما باید بصری را مقیاس کنیم تا تعداد میله ها و مقادیر فعلی در عرض تعریف شده و محدودیت ارتفاع بصری قرار بگیرند. این شبیه به روش بروزرسانی در آموزش Circle Card است.

برای محاسبه مقیاس ، ما از روشهای Scalelinear و Scaleband که قبلاً از کتابخانه در مقیاس D3 وارد می شدند ، استفاده می کنیم.

مقدار ViewModel. Datamax بیشترین مقدار از تمام نقاط داده فعلی را دارد. این مقدار برای تعیین ارتفاع محور Y استفاده می شود. مقیاس برای عرض محور x با تعداد دسته بندی های محدود به بصری در رابط BarchartDataPoint تعیین می شود.

برای مواردی که محور X ارائه می شود ، این بصری نیز در صورت وجود فضای کافی برای نوشتن کل نام در محور X وجود ندارد.

سایر ویژگی های به روزرسانی

علاوه بر مقیاس بندی ، روش بروزرسانی همچنین انتخاب ها و رنگ ها را کنترل می کند. این ویژگی ها اختیاری هستند و بعداً مورد بحث قرار می گیرند:

صفحه خواص را جمع کنید

روش نهایی در عملکرد ivisual getFormattingModel است. این روش یک شیء مدل قالب بندی با فرمت مدرن را ایجاد و باز می گرداند که حاوی تمام اجزای و خصوصیات صفحه فرمت است. سپس جسم را درون صفحه فرمت قرار می دهد. در مورد ما ، ما با توجه به "اشیاء" در پرونده های موجود در پرونده ، کارت های قالب را برای Enableaxis و ColoreElector ، از جمله ویژگی های قالب بندی برای نمایش و پر کردن ایجاد می کنیم.

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

برای اضافه کردن یک انتخاب کننده رنگ برای هر دسته در صفحه ویژگی ، یک حلقه را در Bardatapoints اضافه کنید و برای هر یک ویژگی جدید قالب انتخاب رنگ را به مدل قالب بندی اضافه کنید.

(اختیاری) با استفاده از استفاده از مدل های قالب بندی ، صفحه Properties را جمع کنید

صفحه Properties را با استفاده از API GetFormattingModel در مخزن مدل قالب بندی جمع کنید

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

ویژگی های قالب بندی و مقادیر آنها را در کلاس تنظیمات قالب بندی اعلام کنید:

مدل سرویس تنظیمات قالب بندی را در روش سازنده ویژوال ایجاد و ایجاد کنید. سرویس تنظیمات قالب بندی تنظیمات فرمت بارچارت را دریافت می کند و آنها را به یک شیء قالب بندی که در API GetFormattingModel بازگردانده می شود ، تبدیل می کند.

برای استفاده از ویژگی محلی سازی ، مدیر محلی سازی را به سرویس تنظیمات قالب بندی اضافه کنید.

مدل تنظیمات قالب بندی را با استفاده از API به روزرسانی به روز کنید. هر بار که یک ویژگی قالب بندی در صفحه Properties تغییر می کند ، با API بروزرسانی تماس بگیرید. نقاط داده انتخاب کننده نمودار نوار ایجاد کنید و آنها را در قالب بندی تنظیمات قالب بندی کنید:

سرانجام ، API GetFormattingModel جدید یک خط ساده از کد با استفاده از سرویس تنظیمات قالب بندی و مدل تنظیمات قالب بندی فعلی است که در API به روزرسانی فوق ایجاد شده است.

(اختیاری) محور x (اشیاء استاتیک) را ارائه دهید

برای سفارشی سازی بیشتر بصری می توانید اشیاء را به صفحه ملک اضافه کنید. این سفارشی سازی ها می توانند تغییرات رابط کاربری یا تغییرات مربوط به داده هایی که پرس و جو شده اند باشد.

می توانید این اشیاء را در صفحه ملک خاموش یا خاموش کنید.

این مثال یک محور X را در نمودار نوار به عنوان یک شیء استاتیک ارائه می دهد.

ما قبلاً ویژگی Enableaxis را به پرونده قابلیت ها و رابط BarchartSettings اضافه کردیم. کد زیر را به پرونده Barchart. ts قبل از کلاس ivisual اضافه کنید تا محور x ترسیم شود:

(اختیاری) اضافه کردن رنگ (اشیاء محدود به داده)

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

ما قبلاً شیء ColoreLector را در پرونده قابلیت ها تعریف کردیم.

هر نقطه داده با رنگ دیگری نشان داده شده است. ما رنگ را در رابط BarchartDataPoint قرار می دهیم و هنگامی که در IvisualHost تعریف شده است ، یک رنگ پیش فرض را به هر نقطه داده اختصاص می دهیم.

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

برای دستورالعمل های دقیق تر در مورد نحوه اضافه کردن رنگ به نمودار نوار خود بروید تا رنگ های خود را به Power Bi Visual اضافه کنید

تأیید کنید که پرونده نهایی barchart. ts شما مانند این کد منبع barchart. ts به نظر می رسد ، یا کد منبع barchart. ts را بارگیری کرده و از آن برای جایگزینی پرونده خود استفاده کنید.

ابزار شمارش شی (اختیاری)

مقادیر خاصیت Object به عنوان ابرداده در DataView در دسترس است ، اما هیچ خدمتی برای کمک به بازیابی این مقادیر وجود ندارد. ObjectEnumerationUtility مجموعه ای اختیاری از توابع استاتیک است که از طریق DataView تکرار می شود و مقادیر شی را بازیابی می کند. پرونده ای به نام ObjectEnumerationUtility. ts را در پوشه SRC ایجاد کنید و کد زیر را در آن کپی کنید:

تابع getCategoryObjectValue یک روش مناسب برای دسترسی به خصوصیات توسط شاخص دسته آنها فراهم می کند. شما باید یک نام ObjectName و Propertyname را ارائه دهید که با شی و خاصیت در قابلیت ها مطابقت داشته باشد.

بصری را تست کنید

بصری را در سرور Power BI اجرا کنید تا ببینید که چگونه به نظر می رسد:

در PowerShell ، به پوشه پروژه بروید و برنامه توسعه را شروع کنید.

تصویری شما اکنون در حالی که در رایانه شما میزبانی می شود در حال اجرا است.

پنجره PowerShell را تا پایان آموزش ببندید. برای جلوگیری از اجرای بصری ، Ctrl+C را وارد کنید و در صورت درخواست خاتمه کار دسته ای ، وارد Y شوید و Enter را فشار دهید.

با انتخاب بصری توسعه دهنده از صفحه تجسم ، سرویس Visual in Power BI را مشاهده کنید.

داده ها را به بصری اضافه کنید

لبه های تصویری را بکشید تا اندازه تغییر کند و توجه کنید که چگونه مقیاس تنظیم می شود.

محور x را روشن و خاموش کنید.

رنگ دسته های مختلف را تغییر دهید.

سایر ویژگی ها را اضافه کنید

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

بسته بندی را بسته بندی کنید

قبل از اینکه بتوانید بصری خود را در دسک تاپ Power BI بارگیری کنید یا آن را با جامعه در گالری Visual Power BI به اشتراک بگذارید ، باید آن را بسته بندی کنید.

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

برای کد منبع کامل یک نمودار نوار با ویژگی های بیشتر ، از جمله ابزار ابزار و منوی زمینه ، به نمودار نوار نمونه Power Bi Visuals مراجعه کنید.