บทช่วยสอน: พัฒนาวิชวลการ์ดวงกลม Power BI

บทความ
10/14/2021
5 นาทีในการอ่าน

ในฐานะนักพัฒนาคุณสามารถสร้างวิชวล Power BI ของคุณเองได้ ภาพเหล่านี้สามารถใช้โดยคุณองค์กรของคุณหรือบุคคลที่สามได้

ในบทช่วยสอนนี้คุณจะพัฒนาการแสดงผลด้วยภาพของ Power BI ที่ชื่อว่าการ์ดวงกลมที่แสดงค่าหน่วยวัดที่จัดรูปแบบภายในวงกลม วิชวลการ์ดวงกลมสนับสนุนการกำหนดเองของสีเติมและความหนาของเส้นขอบ

ในบทช่วยสอนนี้ คุณจะเรียนรู้วิธีการ:

สร้างโครงการการพัฒนาสำหรับวิชวลของคุณ
พัฒนาวิชวลของคุณด้วยองค์ประกอบภาพ D3
กำหนดค่าวิชวลของคุณเพื่อประมวลผลข้อมูล
กําหนดค่าวิชวลของคุณเพื่อให้ปรับให้เข้ากับการเปลี่ยนแปลงขนาด
กําหนดการตั้งค่าสีและเส้นขอบที่ปรับเปลี่ยนได้ของวิชวลของคุณ

หมายเหตุ

ดู การ์ดวงกลม วิชวล Power BI ของ รหัสแหล่งที่มาแบบเต็มของวิชวลนี้

สิ่งที่จำเป็นต้องมี

ก่อนที่คุณจะเริ่มพัฒนาวิชวล Power BI ของคุณให้ตรวจสอบว่าคุณมีทุกอย่างที่แสดงอยู่ในส่วนนี้

บัญชี Power BI Pro หรือ Premiumต่อผู้ใช้ (PPU) ถ้าคุณยังไม่มี ลงทะเบียนสำหรับรุ่นทดลองใช้ฟรี
รหัส Visual Studio (VS Code) VS Code คือสภาพแวดล้อมการพัฒนาแบบบูรณาการที่เหมาะสม (IDE) สำหรับการพัฒนาแอปพลิเคชัน JavaScript และ TypeScript
Windows PowerShell เวอร์ชัน4หรือใหม่กว่า (สำหรับ Windows) Terminal (สำหรับ OSX)
สภาพแวดล้อมที่พร้อมสำหรับการพัฒนาวิชวล Power BI ตั้งค่าสภาพแวดล้อมของคุณสำหรับการพัฒนาวิชวล Power BI
บทช่วยสอนนี้ใช้รายงาน การวิเคราะห์การขายของสหรัฐอเมริกา คุณสามารถ ดาวน์โหลดรายงานนี้ และอัปโหลดบริการของ Power BIของคุณ หรือใช้รายงานของคุณเอง หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับการบริการของ Power BI และการอัปโหลดไฟล์โปรดดูที่ เริ่มต้นสร้างในบทช่วยสอน บริการของ Power BI

สร้างโครงการการพัฒนา

ในส่วนนี้คุณจะสร้างโครงการสำหรับการแสดงผลด้วยภาพของการ์ดวงกลม

เปิด PowerShell และนําทางไปยังโฟลเดอร์ที่คุณต้องการสร้างโครงการของคุณ
ป้อนคำสั่งต่อไปนี้:
```
pbiviz new CircleCard
```
นำทางไปยังโฟลเดอร์ของโครงการ
```
cd CircleCard
```
เริ่มการแสดงผลด้วยภาพของการ์ดวงกลม ขณะนี้วิชวลของคุณกำลังทำงานอยู่ในขณะที่โฮสต์บนคอมพิวเตอร์ของคุณ
```
pbiviz start
```
ข้อสำคัญ

อย่าปิดหน้าต่าง PowerShell จนกว่าจะสิ้นสุดบทช่วยสอน เมื่อต้องการหยุดวิชวลจากการเรียกใช้งาน ให้ป้อน Ctrl + C และถ้าได้รับพร้อมท์ให้ยุติชุดงาน ให้ป้อน Y และกด Enter

ดูวิชวลบริการของ Power BI

หากต้องการทดสอบวิชวบริการของ Power BIลแบบพื้นฐาน เราจะใช้ รายงานการวิเคราะห์ยอดขาย ในสหรัฐอเมริกา คุณสามารถ ดาวน์โหลด รายงานนี้และอัปโหลดไปยังบริการของ Power BI ได้

คุณยังสามารถใช้รายงานของคุณเองเพื่อทดสอบวิชวลได้

หมายเหตุ

ก่อนที่คุณจะดำเนินการต่อให้ตรวจสอบว่าคุณ เปิดใช้งานการตั้งค่านักพัฒนาวิชวล

ลงชื่อเข้าใช้ PowerBI.com และเปิดรายงาน การวิเคราะห์การขาย สหรัฐ
เลือก ตัวเลือกเพิ่มเติม > แก้ไข
สร้างหน้าใหม่สำหรับการทดสอบโดยการคลิกที่ปุ่ม หน้าใหม่ ที่ด้านล่างของส่วนติดต่อบริการของ Power BI
จากบานหน้าต่าง การแสดงภาพ ให้เลือก วิชวลของนักพัฒนา

ภาพนี้แสดงการแสดงผลด้วยภาพแบบกำหนดเองที่คุณกำลังใช้งานบนคอมพิวเตอร์ของคุณ พร้อมใช้งานเฉพาะเมื่อเปิดใช้งานการตั้งค่าการ การตรวจแก้จุดบกพร่องของวิชวลแบบกำหนดเอง
ตรวจสอบว่ามีการเพิ่มวิชวลลงในพื้นที่รายงาน

นี่เป็นวิชวลแบบง่าย ๆ ที่แสดงจำนวนครั้งที่มีการเรียกใช้วิธีการอัปเดต ในขั้นตอนนี้ วิชวลยังไม่ได้เรียกข้อมูลใด

หมายเหตุ

หากภาพแสดงข้อความแสดงข้อผิดพลาดในการเชื่อมต่อให้เปิดแท็บใหม่ในเบราว์เซอร์ของคุณไปที่ https://localhost:8080/assets/status และอนุญาตให้เบราว์เซอร์ของคุณใช้ที่อยู่นี้
ในขณะที่เลือกภาพใหม่ให้ไปที่บานหน้าต่าง เขตข้อมูล ขยาย ยอดขาย และเลือก ปริมาณ
หากต้องการทดสอบการตอบสนองของภาพให้ปรับขนาดและสังเกตว่าค่า อัปเดตจำนวน จะเพิ่มขึ้นทุกครั้งที่คุณปรับขนาดวิชวล

เพิ่มองค์ประกอบวิชวลและข้อความ

ในส่วนนี้ คุณจะได้เรียนรู้วิธีเปลี่ยนวิชวลของคุณให้เป็นวงกลมและทำให้แสดงข้อความ

หมายเหตุ

ในบทช่วยสอนนี้ รหัส Visual Studio (VS Code) ใช้สำหรับการพัฒนาวิชวลของ Power BI

ปรับเปลี่ยนไฟล์วิชวล

ตั้งค่าไฟล์ visual.ts โดยการลบและเพิ่มรหัสสองสามบรรทัด

เปิดโปรเจกต์ของคุณใน VS Code (ไฟล์ > เปิดโฟลเดอร์)
ใน บานหน้าต่าง Explorer ขยายโฟลเดอร์ src และเลือกไฟล์ visual.ts

ข้อสำคัญ

สังเกตดูข้อคิดเห็นที่ด้านบนของไฟล์ visual.ts การอนุญาตให้ใช้แพคเกจวิชวล Power BI จะได้รับโดยไม่เสียค่าใช้จ่ายภายใต้เงื่อนไขของสิทธิ์การใช้งานของสถาบันเทคโนโลยีแมสซาชูเซตส์ (MIT) คุณต้องออกจากข้อคิดเห็นที่ด้านบนของไฟล์ ตามส่วนหนึ่งของข้อตกลง
ลบบรรทัดโค้ดต่อไปนี้ออกจากไฟล์ visual.ts
- การนำเข้า VisualSettings:
```
import { VisualSettings } from "./settings";
```
- การยืนยันตัวแปรส่วนตัวระดับคลาสทั้งสี่ครั้ง
- ทุกบรรทัดของรหัสภายใน คอนสตรักเตอร์
- ทุกบรรทัดของรหัสภายในวิธี การอัปเดต
- บรรทัดโค้ดที่เหลือทั้งหมดใต้วิธี อัปเดต รวมถึงวิธี parseSettings และ enumerateObjectInstances
เพิ่มบรรทัดรหัสต่อไปนี้ที่ส่วนท้ายของส่วนการนำเข้า:
- IVisualHost - คอลเลกชันของคุณสมบัติและบริการที่ใช้ในการโต้ตอบกับโฮสต์ภาพ (Power BI)
```
import IVisualHost = powerbi.extensibility.IVisualHost;
```
- ไลบรารี D3
```
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any,any, any>;
```
  หมายเหตุ
  
  หากคุณไม่ได้ติดตั้งไลบรารีนี้เป็นส่วนหนึ่งของการตั้งค่าของคุณให้ ติดตั้งไลบรารี D3 JavaScript

ภายใต้การประกาศคลาส วิชวล ให้แทรกคุณสมบัติระดับคลาสต่อไปนี้ คุณต้องเพิ่มบรรทัดรหัสที่ขึ้นต้นด้วย private

export class Visual implements IVisual {
    // ...
    private host: IVisualHost;
    private svg: Selection<SVGElement>;
    private container: Selection<SVGElement>;
    private circle: Selection<SVGElement>;
    private textValue: Selection<SVGElement>;
    private textLabel: Selection<SVGElement>;
    // ...
}

บันทึกไฟล์ visual.ts

เพิ่มองค์ประกอบวงกลมและข้อความ

เพิ่มกราฟิกเวกเตอร์ D3 ที่ปรับขนาดได้ (SVG) ซึ่งเปิดใช้งานการสร้างรูปร่างสามแบบ: วงกลมและสององค์ประกอบข้อความ

เปิด visual.ts ในรหัส VS
เพิ่มรหัสต่อไปนี้ไปยัง คอนสตรักเตอร์
```
this.svg = d3.select(options.element)
    .append('svg')
    .classed('circleCard', true);
this.container = this.svg.append("g")
    .classed('container', true);
this.circle = this.container.append("circle")
    .classed('circle', true);
this.textValue = this.container.append("text")
    .classed("textValue", true);
this.textLabel = this.container.append("text")
    .classed("textLabel", true);
```
เคล็ดลับ

เพื่อปรับปรุงความสามารถในการอ่าน ขอแนะนำให้คุณจัดรูปแบบเอกสารทุกครั้งที่คุณคัดลอกข้อมูลโค้ดลงในโปรเจกต์ของคุณ คลิกขวาที่ใดก็ได้ในรหัส VS แล้วเลือก จัดรูปแบบเอกสาร (Alt+Shift+F)
บันทึกไฟล์ visual.ts

ตั้งค่าความกว้างและความสูง

ตั้งค่าความกว้างและความสูงของวิชวลและเริ่มต้นแอตทริบิวต์และสไตล์ขององค์ประกอบของวิชวล

เปิด visual.ts ในรหัส VS

เพิ่มรหัสต่อไปนี้ไปยังวิธี อัปเดต

let width: number = options.viewport.width;
let height: number = options.viewport.height;
this.svg.attr("width", width);
this.svg.attr("height", height);
let radius: number = Math.min(width, height) / 2.2;
this.circle
    .style("fill", "white")
    .style("fill-opacity", 0.5)
    .style("stroke", "black")
    .style("stroke-width", 2)
    .attr("r", radius)
    .attr("cx", width / 2)
    .attr("cy", height / 2);
let fontSizeValue: number = Math.min(width, height) / 5;
this.textValue
    .text("Value")
    .attr("x", "50%")
    .attr("y", "50%")
    .attr("dy", "0.35em")
    .attr("text-anchor", "middle")
    .style("font-size", fontSizeValue + "px");
let fontSizeLabel: number = fontSizeValue / 4;
this.textLabel
    .text("Label")
    .attr("x", "50%")
    .attr("y", height / 2)
    .attr("dy", fontSizeValue / 1.2)
    .attr("text-anchor", "middle")
    .style("font-size", fontSizeLabel + "px");

บันทึกไฟล์ visual.ts

(ไม่จำเป็น) รีวิวรหัสในไฟล์วิชวล

ตรวจสอบว่าโค้ดในไฟล์ visuals.ts มีลักษณะดังนี้:

/*
*  Power BI Visual CLI
*
*  Copyright (c) Microsoft Corporation
*  All rights reserved.
*  MIT License
*
*  Permission is hereby granted, free of charge, to any person obtaining a copy
*  of this software and associated documentation files (the ""Software""), to deal
*  in the Software without restriction, including without limitation the rights
*  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
*  copies of the Software, and to permit persons to whom the Software is
*  furnished to do so, subject to the following conditions:
*
*  The above copyright notice and this permission notice shall be included in
*  all copies or substantial portions of the Software.
*
*  THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
*  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
*  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
*  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
*  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
*  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
*  THE SOFTWARE.
*/
"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import IVisualHost = powerbi.extensibility.IVisualHost;
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;

export class Visual implements IVisual {
    private host: IVisualHost;
    private svg: Selection<SVGElement>;
    private container: Selection<SVGElement>;
    private circle: Selection<SVGElement>;
    private textValue: Selection<SVGElement>;
    private textLabel: Selection<SVGElement>;

    constructor(options: VisualConstructorOptions) {
        this.svg = d3.select(options.element)
            .append('svg')
            .classed('circleCard', true);
        this.container = this.svg.append("g")
            .classed('container', true);
        this.circle = this.container.append("circle")
            .classed('circle', true);
        this.textValue = this.container.append("text")
            .classed("textValue", true);
        this.textLabel = this.container.append("text")
            .classed("textLabel", true);
    }

    public update(options: VisualUpdateOptions) {
        let width: number = options.viewport.width;
        let height: number = options.viewport.height;
        this.svg.attr("width", width);
        this.svg.attr("height", height);
        let radius: number = Math.min(width, height) / 2.2;
        this.circle
            .style("fill", "white")
            .style("fill-opacity", 0.5)
            .style("stroke", "black")
            .style("stroke-width", 2)
            .attr("r", radius)
            .attr("cx", width / 2)
            .attr("cy", height / 2);
        let fontSizeValue: number = Math.min(width, height) / 5;
        this.textValue
            .text("Value")
            .attr("x", "50%")
            .attr("y", "50%")
            .attr("dy", "0.35em")
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeValue + "px");
        let fontSizeLabel: number = fontSizeValue / 4;
        this.textLabel
            .text("Label")
            .attr("x", "50%")
            .attr("y", height / 2)
            .attr("dy", fontSizeValue / 1.2)
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeLabel + "px");
    }
}

ปรับเปลี่ยนไฟล์ความสามารถ

ลบบรรทัดรหัสที่ไม่จำเป็นออกจากไฟล์ความสามารถ

เปิดโปรเจกต์ของคุณใน VS Code (ไฟล์ > เปิดโฟลเดอร์)
บันทึกไฟล์ capabilities.json
ลบองค์ประกอบวัตถุทั้งหมด (บรรทัดที่ 14-60)
บันทึกไฟล์ capabilities.json

รีสตาร์ตวิชวลการ์ดวงกลม

หยุดวิชวลจากการเรียกใช้และรีสตาร์ต

ในหน้าต่าง PowerShell ที่ใช้วิชวล ให้ป้อน Ctrl+C และถ้าได้รับพร้อมท์ให้ยุติชุดงาน ให้ป้อน Y และ กด Enter
เริ่ม วิชวลใน PowerShell
```
pbiviz start
```

ทดสอบวิชวลด้วยองค์ประกอบที่เพิ่มเข้ามา

ตรวจสอบว่าวิชวลแสดงองค์ประกอบที่เพิ่มใหม่

ในบริการ Power BI เปิดรายงาน การวิเคราะห์การขาย Power BI ของสหรัฐอเมริกา หากคุณใช้รายงานอื่นเพื่อพัฒนาวิชวลการ์ดวงกลมให้ไปที่รายงานนั้น
ตรวจสอบให้แน่ใจว่าวิชวลเป็นรูปวงกลม

หมายเหตุ

หากวิชวลไม่แสดงอะไรเลยจากบานหน้าต่าง เขตข้อมูล ลากเขตข้อมูล ปริมาณ ลงในวิชวลของนักพัฒนา
ปรับขนาดวิชวล

สังเกตว่าวงกลมและขนาดข้อความจะพอดีกับขนาดของวิชวล วิธีการอัปเดตจะถูกเรียกเมื่อคุณปรับขนาดวิชวลและด้วยเหตุนี้องค์ประกอบวิชวลจึงถูกปรับขนาด

เปิดใช้งานการโหลดซ้ำอัตโนมัติ

ใช้การตั้งค่านี้เพื่อให้แน่ใจว่าวิชวลถูกโหลดซ้ำโดยอัตโนมัติทุกครั้งที่คุณบันทึกการเปลี่ยนแปลงโปรเจกต์

ไปที่รายงาน การวิเคราะห์การขาย Power BI ของสหรัฐอเมริกา (หรือไปยังโครงการที่มีวิชวลการ์ดวงกลมของคุณ)
เลือกวิชวลการ์ดวงกลม
ในแถบเครื่องมือแบบลอยให้เลือก สลับการโหลดอัตโนมัติ

รับวิชวลเพื่อประมวลผลข้อมูล

ในส่วนนี้ คุณจะกำหนดบทบาทข้อมูลและการแมปมุมมองข้อมูล นอกจากนี้คุณยังจะปรับเปลี่ยนวิชวลเพื่อแสดงชื่อของค่าที่แสดง

กำหนดค่าไฟล์ความสามารถ

ปรับเปลี่ยนไฟล์ capabilities.json เพื่อกำหนดบทบาทข้อมูลและการแมปมุมมองข้อมูล

การกำหนดบทบาทข้อมูล

กำหนดอาร์เรย์ dataRoles ที่มีบทบาทข้อมูลเดียวของชนิด หน่วยวัด บทบาทข้อมูลนี้เรียกว่า หน่วยวัด และแสดงเป็น หน่วยวัด อนุญาตให้ส่งผ่านเขตข้อมูลการวัดหรือเขตข้อมูลที่สรุปได้
1. เปิดไฟล์ capabilities.json ใน VS Code
2. ลบเนื้อหาทั้งหมดภายในอาร์เรย์ dataRoles (บรรทัด 3-12)
3. แทรกรหัสต่อไปนี้ในอาร์เรย์ dataRoles
```
{
    "displayName": "Measure",
    "name": "measure",
    "kind": "Measure"
}
```
4. บันทึกไฟล์ capabilities.json
การกำหนดการแมปมุมมองข้อมูล

กําหนดเขตข้อมูลที่เรียกว่า หน่วยวัด ในอาร์เรย์ dataViewMappings เขตข้อมูลนี้สามารถส่งผ่านไปยังบทบาทข้อมูล
1. เปิดไฟล์ capabilities.json ใน VS Code
2. ลบเนื้อหาทั้งหมดภายในอาร์เรย์ dataViewMappings (บรรทัดที่ 10-30)
3. แทรกรหัสต่อไปนี้ในอาร์เรย์ dataViewMappings
```
{
    "conditions": [
        { "measure": { "max": 1 } }
    ],
    "single": {
        "role": "measure"
    }
}
```
4. บันทึกไฟล์ capabilities.json

(ไม่จำเป็น) ตรวจสอบการเปลี่ยนแปลงรหัสไฟล์ความสามารถ

ตรวจสอบว่าวิชวลของการ์ดวงกลมแสดงเขตข้อมูล หน่วยวัด และตรวจสอบการเปลี่ยนแปลงที่คุณทำโดยใช้ตัวเลือก แสดง Dataview

ในบริการ Power BI เปิดรายงาน การวิเคราะห์การขาย Power BI ของสหรัฐอเมริกา หากคุณใช้รายงานอื่นเพื่อพัฒนาวิชวลการ์ดวงกลมให้ไปที่รายงานนั้น
สังเกตว่าขณะนี้ภาพการ์ดวงกลมสามารถกำหนดค่าด้วยเขตข้อมูลที่ชื่อ หน่วยวัด คุณสามารถลากและวางองค์ประกอบจากบานหน้าต่าง เขตข้อมูล ลงในเขตข้อมูล หน่วยวัด

หมายเหตุ

โครงการวิชวลยังไม่ได้รวมตรรกะการผูกข้อมูลเอาไว้
ในแถบเครื่องมือลอยให้เลือก แสดงมุมมองข้อมูล
เลือกจุดสามจุดเพื่อขยายการแสดงผลและเลือก แบบเดี่ยว เพื่อดูค่า
ขยาย เมตาดาต้า ตามด้วยอาร์เรย์ คอลัมน์ และตรวจสอบค่า รูปแบบ และ displayName
เมื่อต้องการสลับกลับไปที่วิชวล ในแถบเครื่องมือที่ลอยอยู่เหนือวิชวล ให้เลือก แสดงมุมมองข้อมูล

<a name="configure-the-visual-to-consume-data">กำหนดค่าวิชวลเพื่อใช้ข้อมูล

ทำการเปลี่ยนแปลงไฟล์ visual.ts เพื่อให้วิชวลการ์ดวงกลมสามารถใช้ข้อมูลได้

เปิดไฟล์ visual.ts ใน VS Code
ตรวจสอบให้แน่ใจว่าบรรทัดต่อไปนี้ปรากฏในไฟล์เพื่อนําเข้า DataView อินเทอร์เฟซจาก powerbi โมดูล ถ้าไม่อยู่ในไฟล์ ให้เพิ่ม
```
import DataView = powerbi.DataView;
```
ในวิธีการ อัปเดต ให้ดำเนินการดังต่อไปนี้:
- เพิ่มคำสั่งต่อไปนี้เป็นคำสั่งแรก คำสั่งกำหนด มุมมองข้อมูล ให้กับตัวแปรเพื่อให้เข้าถึงได้ง่ายและประกาศให้ตัวแปรอ้างอิงออบเจ็กต์ มุมมองข้อมูล
```
let dataView: DataView = options.dataViews[0];
```
- แทนที่ .text ("Value") ด้วยโค้ดบรรทัดนี้:
```
.text(<string>dataView.single.value)
```
- แทนที่ .text("Label") ด้วยโค้ดบรรทัดนี้:
```
.text(dataView.metadata.columns[0].displayName)
```
บันทึกไฟล์ visual.ts
ตรวจสอบวิชวลในบริการ Power BI

วิชวลจะแสดงชื่อและค่าของเขตข้อมูลที่เลือก

ขณะนี้คุณได้สร้างวิชวล Power BI ที่ใช้งานได้แล้ว คุณสามารถเพิ่ม ตัวเลือกการจัดรูปแบบให้กับ ข้อมูลหรือคุณสามารถ แพคเกจ ตามไว้เพื่อการใช้งานทันที

ขั้นตอนถัดไป

เพิ่มตัวเลือกการจัดรูปแบบไปยังวิชวลการ์ดวงกลม

สร้างวิชวลแผนภูมิแท่ง Power BI

เรียนรู้วิธีการดีบักภาพ Power BI ที่คุณสร้างขึ้น

โครงสร้างของโครงการวิชวล Power BI

บทช่วยสอน: พัฒนาวิชวลการ์ดวงกลม Power BI

โปรดให้คะแนนประสบการณ์การใช้งานของคุณ

สิ่งที่จำเป็นต้องมี

สร้างโครงการการพัฒนา

ดูวิชวลบริการของ Power BI

เพิ่มองค์ประกอบวิชวลและข้อความ

ปรับเปลี่ยนไฟล์วิชวล

เพิ่มองค์ประกอบวงกลมและข้อความ

ตั้งค่าความกว้างและความสูง

(ไม่จำเป็น) รีวิวรหัสในไฟล์วิชวล

ปรับเปลี่ยนไฟล์ความสามารถ

รีสตาร์ตวิชวลการ์ดวงกลม

ทดสอบวิชวลด้วยองค์ประกอบที่เพิ่มเข้ามา

เปิดใช้งานการโหลดซ้ำอัตโนมัติ

รับวิชวลเพื่อประมวลผลข้อมูล

กำหนดค่าไฟล์ความสามารถ

(ไม่จำเป็น) ตรวจสอบการเปลี่ยนแปลงรหัสไฟล์ความสามารถ

<a name="configure-the-visual-to-consume-data">กำหนดค่าวิชวลเพื่อใช้ข้อมูล

ขั้นตอนถัดไป