แชร์ผ่าน

เพิ่มสีลงในวิชวล Power BI ของคุณ

  • บทความ

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

IVisualHostคอลเลกชันของคุณสมบัติและบริการที่โต้ตอบกับโฮสต์วิชวล สามารถกําหนดสีในวิชวลแบบกําหนดเองด้วย colorPalette บริการ โค้ดตัวอย่างในบทความนี้จะปรับเปลี่ยนวิชวล SampleBarChart สําหรับรหัสแหล่งที่มาของวิชวล SampleBarChart ให้ดู barChart.ts

หากต้องการเริ่มต้นสร้างวิชวล โปรดดู การพัฒนาวิชวลการ์ดวงกลมใน Power BI

เพิ่มสีไปยังจุดข้อมูล

หากต้องการแสดงแต่ละจุดข้อมูลในสีที่แตกต่างกัน ให้เพิ่ม color ตัวแปรลงใน BarChartDataPoint อินเทอร์เฟซ ดังที่แสดงในตัวอย่างต่อไปนี้:

/**
 * Interface for BarChart data points.
 *
 * @interface
 * @property {number} value    - Data value for point.
 * @property {string} category - Corresponding category of data value.
 * @property {string} color    - Color corresponding to data point.
 */
interface BarChartDataPoint {
    value: number;
    category: string;
    color: string;
};

ใช้บริการจานสี

บริการ colorPalette จะจัดการสีที่ใช้ในวิชวลของคุณ อินสแตนซ์ของcolorPaletteบริการพร้อมใช้งานบนIVisualHost

กําหนดชุดสีใน update วิธีการ ด้วยโค้ดต่อไปนี้:

constructor(options: VisualConstructorOptions) {
        this.host = options.host; // host: IVisualHost
        ...
    }

public update(options: VisualUpdateOptions) {

    let colorPalette: IColorPalette = host.colorPalette;
    ...
}

การกําหนดสีให้กับจุดข้อมูล

ถัดไป ระบุdataPoints ในตัวอย่างนี้ แต่ละ ตัว dataPoints มีค่า ประเภท และคุณสมบัติสีที่กําหนด dataPoints และยังสามารถรวมคุณสมบัติอื่น ๆ ได้ด้วย

visualTransformใน SampleBarChartวิธีการ เป็นส่วนหนึ่งของแผนภูมิแท่ง viewmodel visualTransformเนื่องจากวิธีการนั้นทําซ้ําผ่านdataPointsการคํานวณทั้งหมด จึงเป็นสถานที่ที่เหมาะสมที่จะกําหนดสี ดังเช่นในโค้ดต่อไปนี้:


public update(options: VisualUpdateOptions) {
    ....
    let viewModel: BarChartViewModel = visualTransform(options, this.host);
    ....
}

function visualTransform(options: VisualUpdateOptions, host: IVisualHost): BarChartViewModel {
    let colorPalette: IColorPalette = host.colorPalette; // host: IVisualHost
    for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
        barChartDataPoints.push({
            category: category.values[i],
            value: dataValue.values[i],
            color: colorPalette.getColor(category.values[i]).value,
        });
    }
}

จากนั้นใช้ข้อมูลจาก dataPoints ไปยัง d3-การเลือก barSelection ภายใน update วิธีการ:

// This code is for d3 v5
// in d3 v5 for this case we should use merge() after enter() and apply changes on barSelectionMerged
this.barSelection = this.barContainer
    .selectAll('.bar')
    .data(this.barDataPoints);

const barSelectionMerged = this.barSelection
    .enter()
    .append('rect')
    .merge(<any>this.barSelection);

barSelectionMerged.classed('bar', true);

barSelectionMerged
.attr("width", xScale.bandwidth())
.attr("height", d => height - yScale(<number>d.value))
.attr("y", d => yScale(<number>d.value))
.attr("x", d => xScale(d.category))
.style("fill", (dataPoint: BarChartDataPoint) => dataPoint.color)
.style("stroke", (dataPoint: BarChartDataPoint) => dataPoint.strokeColor)
.style("stroke-width", (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`);

this.barSelection
    .exit()
    .remove();

เนื้อหาที่เกี่ยวข้อง